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

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
RIAdventure Was a Blas with photos

Recent Comments

submiting a form inside an iframe from outside the iframe
Peter said: I doubt you’re still having this problem over 2 years later, but if anyone else finds this page on t... [More]

FireFox 3.6 KTML Editor Fix
Dario Vargas said: Gracias por publicar la solución a la compatibilidad del KTML a Firefox 3.6 y la solucion al panel d... [More]

Vista Zip Slow and Broken?
betniurbo said: lzCfXK <a href="http://sapiensyckas.com/&...;, [url=http://zynqf... [More]

FireFox 3.6 KTML Editor Fix
Richard said: These fixes have worked on some issues, but any idea why the paragraph button no longer wants to wor... [More]

FireFox 3.6 KTML Editor Fix
joshua said: if I remember right, just change (this.edit.readyState != "complete") to (1 == 0) It is ... [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       

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 (217) [RSS]
World of Warcraft (16) [RSS]