Forum Moderators: open

Message Too Old, No Replies

valign problem in IE

Vertical navbar displays a margin at the top in IE when it should be flush

         

Gray_Fox

7:03 pm on Apr 3, 2008 (gmt 0)

10+ Year Member



HTML:
<tr><td width="134" valign="top" class="vnb"><a href="/hotels/" style="border-top:1px solid #34364D; background-image:url(/i/lnb-bg-top2.gif);">ACCOMMODATIONS</a>
<a href="/"><img src="/i/moon2.gif" border="0" alt="Crescent Moon">HOME</a></td>

CSS:
td.vnb {background-image:url(/i/lnb-bg-sides-134.gif); background-repeat:repeat-y; /*border: 1px solid #34364D; border-collapse:separate;*/ text-align:center; font-size:10px; font-weight:bolder; font-family:Arial,Helvetica,sans-serif; padding-top:0px; margin-top:none; vertical-align:top;}

PROBLEM:
Our vertical navbar is not flush with the top of the page in IE when the page is really long. The longer the page, the wider the margin at the top of the navbar in IE. All other browsers work fine. The navbar is the leftmost column in a 3-column layout. The longer the middle column (our content column), the wider the margin. When our content column is shorter than our navbar, there is no problem.

Any input would be greatly appreciated. I've been fixing it on a case by case basis by specifying <td height=9000> or whatever the vertical length of the content column, but that's really clunky when you have a site of 3,500 pages with varying page lengths.

Thanks a bunch :)

Gray_Fox

7:31 pm on Apr 4, 2008 (gmt 0)

10+ Year Member



Any help please?

Thank you :)

tedster

9:12 pm on Apr 4, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried a second <tr> below the menu section - maybe with just a &nbsp; and a height:100% rule. You'll need to add a rowspan=2 to the content and right-hand areas as well.

I know that's a kludge, but if it works then it's better than a hand edit to every page. I ran into this on an older site and this was a work-around that got results for their layout.