File this one under, you may have seen it before, but I ran across a very weird IE6 bug yesterday. This bug gave me a fit, and I hadn’t encountered it before, at least I don’t remember it.
The problem was an empty div with a height set to 6px. The actual height in IE6 was 18px. If I set the height to 20px, it would be 20px, but if it was less than 18px, it would stay at 18px. Well, it just so happens that 18px is the line-height. So what’s happening is the empty div is inheriting the line-height, even though there is no text inside the div. Go figure.
Another interesting thing is that reducing the line-height doesn’t fix the problem. No matter how I tried, it stayed at 18px. Even setting the line-height inline doesn’t work. What does work is setting the font size to 0. This fixed it instantly. So remember, if you are using empty divs in IE and they are smaller than the line-height, you need to set font size to 0.
See the screenshot below and click on the link to see an example.
An overflow: hidden; should do fine as well.
Nice easy fix, big help. THANKS!!!!
After 30 minutes of mucking about with the CSS, you came to my rescue. Thanks!!!
Great, this fixes the fkin bug in IE. (one of 827364 million). Thank you. Overflow hidden should do it aswell though, havn’t tried it in this project.
Another method that can solve this issue, just put a comment inside the div. (I’m not sure if this works in all cases)
Thanks a lot, this really helped. In my case I had 3 list items in a ul that makes up a progress bar with rounded ends, and the middle item was behaving like what you said, when I set the font size to 0 it worked!!