IE nested list item whitespace solution: vertical-align:bottom
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.
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 (4) - 2190 views
Comments (moderation on)
I was trying few hours to find a solution, that works for the idiots who are developing IE.
When my CMS start, i'll put a link to this place to say Thanks!