Related Categories: Web Dev

I have been struggling for a bit now to get a nested list item menu to display correctly in IE.  Specifically when using the strict doctype.  My menu would show fine in FF and Netscape, but in IE there would be whitespace below some of my nested list items.

For a while I thought I was dealing with the haslayout bug.  And in fact I am sure that there were a couple issues fixed by applying zoom: 1 to my items and links.  However I still had some mysterious whitespace show up around my nested items.  I was about to give up and get rid of my doctype (ack!).

The fix, it turns out, is vertical-align:bottom

 ul,  li,  li a { vertical-align:bottom;}

No clue why that happens.  As far as I can tell the vertical-align does not trigger layout, so it isn't actually related to the haslayout bug. 

There are a couple other sites I can find that make mention of using it to remove some whitespace.  Is it padding?  Is it Margin?  Whatever, at least it is resolved and I can move on to actual productive coding.


Like this entry? Subscribe to my blog.

Comments

Thanks for the post! This has saved me tons of time...
# Posted By Andrew | 2/27/08 12:26 PM

Sponsors


Savvy Content Manager