IE and vertical Link Lists- Why do I have double padding top and bottom?
It’s long been one of those mysteries to me why IE would double the top and bottom padding on some of my linklists. Not all of them, mind you, just SOME of them. Because I was always able to hack around it the cause for it didn’t seem that important to find, and if IE users see a list that’s slightly different than the good browsers, I figured that if I was serving them something they could use and that didn’t look too terrible that’s all they deserved . . . any webdev knows how much time we all waste hacking around that damned broken browser.
Well, the mystery of the doubled padding top and bottom in vertical linklists in IE6 has been solved, or at least I can say I know what causes it. I’ll leave it to the more twisted brains in
Redmond to tell us WHY, though they’ve never done a very good job of explaining it. I was testing a layout today and decided to change the hover color on the list from just on the text to instead be a background and text color change. This meant putting the padding on the “ul a” instead of on the “li”. Well, I did that and then previewed in both browsers. IE showed double spacing between the list items.
If you put the padding on the “li” then IE6 won’t double it, but that isn’t really the right way. The right way is to put the padding on the “ul a” so that the hover effect covers the whole of the interior of the “li”– and when you do THAT is when IE doubles the padding in those vertical link lists. Which means conditional comments are your friends . . . yet again. This problem is related to the whole “haslayout” thing. So you simply feed a height of 1px or some other haslayout trigger through a Conditional Comment to the “ul a” (and sometimes also to the li) in question. Problem solved.
** UPDATE ** The safer haslayout trigger to use, in this particular instance, which works in all versions of IE and doesn’t affect the good browsers, is to use zoom: 1; on the ul a element. Since this does nothing harmful to the good browsers you don’t need to use a conditional comment, it can go right in the main stylesheet.
