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

 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.

TweetBacks
Comments
Andrew's Gravatar Thanks for the post! This has saved me tons of time...
# Posted By Andrew | 2/27/08 12:26 PM
Jordan Isip's Gravatar 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
Nikolay Iliev's Gravatar 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
Tom Beynon's Gravatar Thank you so much! I would never have guessed this solution, you just saved me ripping my hair out.
# Posted By Tom Beynon | 6/3/09 4:27 PM

NAVIGATION

Home
About Me

RSS


Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Entries

Flash Camp Boston
New Blog Design
Pre-Conference Training at cf.Objective()
FireFox 3.6 KTML Editor Fix
I am now a part of the Adobe Community Professionals Group

Recent Comments

User and Group Permissions in a CMS
tkefzqigs said: x46ART <a href="http://mgpqclakayeg.com/&...;, [url=http://kmmmc... [More]

FireFox 3.6 KTML Editor Fix
Fred said: Found another bug in Firefox 3.6 When inserting a table you can't select the number of columns. So I... [More]

Repeating Events Question
ueghbxedu said: UaejcB <a href="http://ysyhrmkbkhco.com/&...;, [url=http://pwncz... [More]

Repeating Events Question
fadxkfyuadn said: n6qVCL <a href="http://bdiorhdtbwzb.com/&...;, [url=http://uvnao... [More]

FireFox 3.6 KTML Editor Fix
Joshua said: While changing that far will load the editor, does it show the drop down class menu correctly now? [More]

Calendar

Sun Mon Tue Wed Thu Fri Sat
 123456
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31    

Archives By Subject

blogs (31) [RSS]
books (4) [RSS]
Crazy (39) [RSS]
DIY (8) [RSS]
Flex (3) [RSS]
games (10) [RSS]
GRRR (13) [RSS]
Ideas (11) [RSS]
Local (14) [RSS]
LOLpics (2) [RSS]
money (9) [RSS]
music (3) [RSS]
Personal (27) [RSS]
Photos (8) [RSS]
Politics (8) [RSS]
Projects (22) [RSS]
Review (18) [RSS]
RPM (9) [RSS]
Spam (16) [RSS]
Technology (66) [RSS]
Testing (3) [RSS]
TV (15) [RSS]
video (32) [RSS]
Web Dev (218) [RSS]
World of Warcraft (16) [RSS]