Solved

align selectbox top left in TD cell

Posted on 2006-11-14
9
1,458 Views
Last Modified: 2011-10-03
table.availabilityCalendar td.yearSelector
{
      width:200px;
      margin:0px;
      text-align:left;
      vertical-align:top;
      padding:0px;
      color:#888888;
      font-size:0.85em;
      font-family: "ITC officina sans book", helvetica, arial, sans-serif;
}

table.availabilityCalendar td select.yearSelection
{
      margin:0px;
      padding:0px;
      color:#888888;
      font-size:0.85em;
      font-family: "ITC officina sans book", helvetica, arial, sans-serif;
}

$html .= '<td class="dateSelector">'."\n";
$html .= '<select class="yearSelection" name="yearSelection" id="yearSelection" onchange="this.form.submit();">'."\n";

for ($i = 1; $i <= count($year_array); $i++)
{
      $current = ($year_array[$i-1] == $year) ? ' selected' : ' ';
$html .= '<option value="'.($year_array[$i-1]).'"'.$current.'>'.$year_array[$i-1].'</option>'."\n";
}

$html .= '</select>'."\n";
$html .= '</td>'."\n";
0
Comment
Question by:ellandrd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 2

Expert Comment

by:eheimer
ID: 17941002
You have only posted the code for a single cell here.  That is not sufficient detail for anyone to determine a problem.  Your cell as laid out will be the exact same size as your select box.  However, the cell's size will be effected by the size of the table and the cells around it.  Post more of your code and we'll try to dissect it for you.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17941056
>>You have only posted the code for a single cell here.
>>That is not sufficient detail for anyone to determine a problem

this is more than enough! - im just wanting to align the select box to the top left of the TD so this is all you need - i only have 1 cell anyway.

>>Your cell as laid out will be the exact same size as your select box.

Mmmm on my page its of size 200px with my select box aligned left...

How can i align it vertically so its aligned top-left?
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 17941556
try
$html .= '<td class="dateSelector" valign="top">'."\n";

otherwise, if you want only the textbox aligned top left and the rest of the content in the cell to behave as per normail in the table cell, you could use positioning.

like this;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
      </style>
</head>

<body>

<table style="width: 200px; height: 200px; border: 1px solid #000; position: relative;">
<tr>
<td>
<select name="point_value" id="pointValue" style="position: absolute; top: 0px; left: 0px;">
<option value="500">500 points -Very Difficult</option>
<option value="250">250 points - Difficult</option>
<option value="125">125 points - Moderate</option>
<option value="50">50 points - Easy</option>
</select>
blah blah blah blah blah
</td>
</tr>
</table>


</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:VirusMinus
ID: 17946079
glad my comment helped? why the 'B'? did you need more info or a more specific solution? should've asked if that was the case.. before awarding..
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17946096
your solution was fine but i was hoping somebody would just got it working without using inline styling... as i didnt want to use style="" inside the TD tag and just wanted to use external CSS
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17946170
well you just need to ask mate :) you did not specify that in your question or your comment.

here you go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
     <title>Untitled</title>
     <style type="text/css">
          .availabilityCalendar{width: 200px; height: 200px; border: 1px solid #000; position: relative;}
          .availabilityCalendar .yearSelection{position: absolute; top: 0px; left: 0px;}
     </style>
</head>

<body>

<table class="availabilityCalendar">
<tr>
<td>
<select name="point_value" id="pointValue" class="yearSelection">
<option value="500">500 points -Very Difficult</option>
<option value="250">250 points - Difficult</option>
<option value="125">125 points - Moderate</option>
<option value="50">50 points - Easy</option>
</select>
blah blah blah blah blah
</td>
</tr>
</table>


</body>
</html>
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17946193
ive asked for your grade to be upgraded to A...
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17947319
ok, your now a grade A...

ellandrd
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17947652
thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question