problem with align table

[impulse]

I'm going through and validating my code and correcting the issues.

valid code
http://www.impulsenc.com/problem/html/salesRepres.htm


before validating code
http://www.impulsenc.com/html/salesRepres.htm

Why can I not get the navigation table to be at the top?

[dtm32236]

try:

<td valign="top" class="menu" id="choice1" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'The #1 DHTML site online')" onmouseout="moveout(this)">

or this:

<td class="menu" id="choice1" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand; verticle-align:top;" onmouseover="movein(this,'The #1 DHTML site online')" onmouseout="moveout(this)">

[dtm32236]

i don't remember which one (if any) will validate correctly.

[KDLA]

(It's actually "vertical-align: top;") ;)

[impulse]

I have vertical-align:top on the table.

Code for the table that will not align at the top.
<table width="177" border="0" bgcolor="#d4d4d4" align="center" style="vertical-align:top;">

<tr>
<td class="menu" id="choice1" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'The #1 DHTML site online')" onmouseout="moveout(this)">
<div align="center"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><a href="../html/history.htm">History
</a></font></div> </td>
</tr>
<tr>
<td class="menu" id="choice2" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Free webmaster resources')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/oeg_products.htm">Overhead Electrification Group </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice3" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Free webmaster resources')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/ocs_catalog.htm">O.C.S.
Catalog </a></font></div>
</td>
</tr>

<tr>
<td class="menu" id="choice4" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/salesRepres.htm">Sales Representatives</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice5" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/prRelease.htm">Press Release</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice6" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/literature.htm">Literature</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice7" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/emc_traction.htm">EMC
traction </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice8" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/contact_us.htm">Contact
Us </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice9" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/projects.htm">Projects</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice10" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/photo_gallery.htm">Photo
Gallery </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice11" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/site_map.htm">Site
Map </a></font></div>
</td>
</tr>

<tr>
<td align="center"><hr /><p class="style6"><font face="Arial, Helvetica, sans-serif" color="#003399">Quality Policy<br />
<br />
The purpose of our business<br />
is to provide continuous electrical power to keep
people moving. <br />
</font><font face="Arial, Helvetica, sans-serif" color="#003399">We do this
by helping customers <br />
create
the most economical
power systems in the
transit industry through continuous improvement<br />
</font><font face="Arial, Helvetica, sans-serif" color="#003399"> in the quality of our products <br />
and processes. </font></p>
</td>
</tr>
<tr>
<td><hr /><img src="../art/ul_9001.jpg" alt="UL 9001 Logo" width="177" height="90" />
</td>
</tr>
</table>

[KDLA]

You need to put the vertical-align setting in the <td> which holds the menu table. Putting vertical align in the menu's table tag will only cause the links in the menu table to vertically align to the top of their holding cells.

KDLA

[dtm32236]

yes, you need vertical-align:top; in <td>

[impulse]

I made the changes...same problem

<table width="177" border="0" bgcolor="#d4d4d4" align="center" style="vertical-align:top;">

<tr>
<td class="menu" id="choice1" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'The #1 DHTML site online')" onmouseout="moveout(this)">
<div align="center"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><a href="../html/history.htm">History
</a></font></div> </td>
</tr>
<tr>
<td class="menu" id="choice2" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Free webmaster resources')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/oeg_products.htm">Overhead Electrification Group </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice3" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Free webmaster resources')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/ocs_catalog.htm">O.C.S.
Catalog </a></font></div>
</td>
</tr>

<tr>
<td class="menu" id="choice4" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/salesRepres.htm">Sales Representatives</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice5" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/prRelease.htm">Press Release</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice6" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/literature.htm">Literature</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice7" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/emc_traction.htm">EMC
traction </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice8" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/contact_us.htm">Contact
Us </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice9" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/projects.htm">Projects</a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice10" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/photo_gallery.htm">Photo
Gallery </a></font></div>
</td>
</tr>
<tr>
<td class="menu" id="choice11" style="background-color:#d4d4d4;border-color:#d4d4d4;cursor:hand;vertical-align:top;" onmouseover="movein(this,'Resources to build your site')" onmouseout="moveout(this)">
<div align="center"><font color="#CCCCCC" face="Arial, Helvetica, sans-serif"><a href="../html/site_map.htm">Site
Map </a></font></div>
</td>
</tr>

<tr>
<td align="center" style="vertical-align:top;"><hr /><p class="style6"><font face="Arial, Helvetica, sans-serif" color="#003399">Quality Policy<br />
<br />
The purpose of our business<br />
is to provide continuous electrical power to keep
people moving. <br />
</font><font face="Arial, Helvetica, sans-serif" color="#003399">We do this
by helping customers <br />
create
the most economical
power systems in the
transit industry through continuous improvement<br />
</font><font face="Arial, Helvetica, sans-serif" color="#003399"> in the quality of our products <br />
and processes. </font></p>
</td>
</tr>
<tr>
<td style="vertical-align:top;"><hr /><img src="../art/ul_9001.jpg" alt="UL 9001 Logo" width="177" height="90" />
</td>
</tr>
</table>

[harumph]

The top of what? Is this menu being placed inside something else (another table)?
If not, you may need to put this in the body tag: topmargin="0" leftmargin="0"

[impulse]

Yes, it is inside of another table.

looks like now
http://www.impulsenc.com/problem/html/salesRepres.htm

suppose to look like
http://www.impulsenc.com/html/salesRepres.htm

[dtm32236]

so, you have something like this:

<table>
<tr>
<td>header stuff</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>side links</td>
</tr>
</table>
</td>
</tr>
</table>

you need to add the vertical-align:top to the parent table cell:

<table>
<tr>
<td>header stuff</td>
</tr>
<td style="vertical-align:top;">
<table>
<tr>
<td>side links</td>
</tr>
</table>
</td>
</tr>
</table>

[impulse]

Thanks!