IE6 bullet aligned to bottom of list-item (LI)
18th September 2008 by Jason C. Filed under: CSS
I just thought I’d jot this down for posterity as I’ve seen it before but not often enough for me to remember the solution. Posting this should help that, though.
When using LI in IE6, if the LI has hasLayout activated, then the corresponding bullet will be aligned to the bottom of the item instead of the top. Why the devs writing IE6 thought that this would be useful I don’t know. Or perhaps, it’s a bug? The shock of it all.
The solution is to target the LI and to disable hasLayout. The method I used today was this:
li {zoom:0;}
This directly countermands the zoom:1; I had added to other elements to get the page to hang together in IE6.
by Zack Katz @ Katz Web Design
on 31st October 2008 at 4:12 pm:
Thanks! Just what I needed. I’ve had this problem multiple times and just ended up using list-item:none and then applying a background image.
This is better- I hope it works!
by Jason C
on 31st October 2008 at 4:20 pm:
My fingers are crossed for you. It’s worked for me several times. If it doesn’t work at the first attempt, try examining exactly what triggers ‘hasLayout’ for those LIs so you can negate it.