valign=top not working on one column of a table

the other column is OK though

[brizad]

Hi, this is kinda strange and I'll be the first to admit I'm no HTML CSS guru...but I can't figure this out.

This is the basic table (from my dreamweaver template):

<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="15%" bgcolor="#EADDFF" class="leftbarheadline" height="20">Choose Your Arrangement</td>
<td width="85%" rowspan="8" class="leftbarheadline"><!-- TemplateBeginEditable name="main body" -->&nbsp;<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../birthday.html">Birthday</a></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../love.html">Love &amp; Anniversary </a></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../getwell.html">Get Well</a> </td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../petlover.html">Pet Lovers </a></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../newbaby.html">New Baby </a></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" height="20"><a href="../tropical.html">Tropical</a></td>
</tr>
<tr>
<td bgcolor="#EADDFF" class="leftbar" valign="top" height="250"><p><img src="../images/leftbartest.jpg" width="100" height="82"></p>
<p>Our Clients Say... <br>
<span class="leftbartestimonial">"The arrangement is so beautiful and is as fresh today as the day it was delivered...it makes my&nbsp;husband look so good!"</span></p> </td>
</tr>
</table>

Basically I want the first column (the <td> 15% one and the other <td> in that column) text to be at the top. The other <td> (85%) valigns top OK.

Actually the whole table looks fine until the second <TD> (template main body) gets lots of content in it and goes really long, then the first column's text just stretches all the way down the page instead of staying at the top.

I played with the valigns, the <td>heights , the CSS align stuff and can't figure it out. Why can't I keep the left column's text positioned at the top when the right column stretches long?

Any help is appreciated. Thanks!

[MichaelBluejay]

I've had this problem too and I think that's the way it's *supposed* to work.

The solution I use is to have two columns, and in the left-hand column I put another table to hold the menu. For example:

[pre]
<TABLE>
 <TR>
  <TD>
   <TABLE>
    <TR><TD>MenuItem1/TD></TR>
    <TR><TD>MenuItem2/TD></TR>
    <TR><TD>MenuItem3/TD></TR>
   </TABLE>
  </TD>
  <TD>Content</TD>
 </TR>
</TABLE>

[/pre]

[tbear]

I would describe a menu as a list, so why not put a <ul> in the first <td>, controlled with a little CSS, plus a <rowspan="2" valign="top"> to keep things in order when the content gets longer.

<TABLE border="1">
<TR>
<TD rowspan="2" width="15%" valign="top">
Menu list
<ul type="disc">
<li>
MenuItem1
<li>
MenuItem1
<li>
MenuItem1
<li>
MenuItem1
<li>
MenuItem1
</ul>
</TD>
<TD>
Content
</TD>
</TR>
</TABLE>

Since I am not (yet!) using CSS for page layout, I use this as a basic page template, adding <td>s for extra columns as and when I want them.
I would put most of the <table> controls in the CSS file. You can make the <ul> and it's <li>s look the way you want them to, even change them all later.
Plus, it's one table less......

[tedster]

The valign attribute applies to a single table cell, and not to an entire column.

The troubles (in IE) come up because you are putting each menu item in a new row. tbear has it right - make the menu a list, all within one cell, and those troubles should vanish.

You can often visualize table troubles more easily by temporarily adding border="1" to the <table> tag.

[mrnoisy]

...or just put this in your stylesheet:

td {
vertical-align:top;
}

[brizad]

Lots of great solutions. I'll give em a try to see which one works best.

Thanks and happy new year!

[MichaelBluejay]

mrnoisy, I don't think putting that CSS declaration in there will do it. The problem is different, that the cells get stretched. That's why I think the solution is to have the menu be a separate table, or a css-formatted list.

[mrnoisy]

You're right MichaelBluejay. I'd go with the <ul>, less code than a nested table.

[brizad]

mrnoisy, I don't think putting that CSS declaration in there will do it.

You're correct, it didn't work.

I went with the nested table (which worked great) for the time being..easier for me as I wanted to get the page out for a client quickly.

I know that the <ul> would have been less code, but I'm just learning CSS and didn't have the time to figure out how to not have the <ul> have the slight indention to the right. I suppose there is an easy way to get it to align all the way left but I didn't have time to figure it out.

Is there an easy way to do this?

[mrnoisy]

At the risk of venturing into the css forum's territory:

ul {
margin:0;
padding:0;
}
li {
margin:0;
padding:0;
}

Or you can set the indents to whatever you like

li {
margin-left:10px;
}

And to eliminate the bullet points:

li {
list-style-type:none;
}

[brizad]

mrnoisy>>
Great info thanks!

I'm just starting to work with CSS and finding it really awesome to work with. Still a lot to learn though...