Solved

align selectbox top left in TD cell

Posted on 2006-11-14
9
1,437 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open a div with click on an image 7 87
Creating a slider 12 44
Having a little issue with EDGE/IE CSS display of after 2 30
Angular JS Route 3 45
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now