IE nested list item whitespace solution: vertical-align:bottom

Posted At : December 3, 2007 3:43 PM
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.

Comments (5) |

Print |

del.icio.us |

Digg It! | 4649 Views

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

Thanks for the post! This has saved me tons of time...

# Posted By Andrew | 2/27/08 12:26 PM

Wow, I just wasted a bunch of time thinking that I was dealing with a haslayout bug also. Thank you so much for posting this.

# Posted By Jordan Isip | 12/31/08 5:14 PM

Thanks a lot!

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!

# Posted By Nikolay Iliev | 5/5/09 1:21 PM

Thank you so much! I would never have guessed this solution, you just saved me ripping my hair out.