• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1476
  • Last Modified:

align selectbox top left in TD cell

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
ellandrd
Asked:
ellandrd
  • 4
  • 4
1 Solution
 
eheimerCommented:
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
 
ellandrdAuthor Commented:
>>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
 
VirusMinusCommented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
VirusMinusCommented:
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
 
ellandrdAuthor Commented:
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
 
VirusMinusCommented:
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
 
ellandrdAuthor Commented:
ive asked for your grade to be upgraded to A...
0
 
ellandrdAuthor Commented:
ok, your now a grade A...

ellandrd
0
 
VirusMinusCommented:
thanks
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now