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
Solved

align selectbox top left in TD cell

Posted on 2006-11-14
9
1,450 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

860 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