IE6 Extra Element Padding/Margin
CSS March 23rd, 2007I organized a navigation in proper semantic XHTML: a series of < li> tags and fixed height for each element, with a button type image nested within the li tags. With the fixed CSS height assigned to the li elements, this works properly in IE7, Firefox, and Safari. IE6, however, only displays properly if you don't properly indent your XHTML, as follows:
Obviously, the latter is not an acceptable solution. One needs properly indented code. For some reason, IE6 reads the whitespace there, unlike the proper interpretation of xml schemas.
To eliminate this, as long as you have an assigned height to your li elements, apply overflow:hidden to the li elements, as follows:
-
li{
-
height:20px;
-
overflow:hidden;
-
}
Perfecto! The extra white-space in IE6 is hidden. You can force only IE6 to read this by using the valid CSS * html selector. Thus, only IE6 will apply the filter while retaining valid CSS.
-
li{
-
height:20px;
-
}
-
-
* html li{
-
overflow:hidden;
-
}
UPDATE:
I just found that this method only works with block-level elements. Recall that the problem only occurs in IE6. Thus, if you are using IE6 and you have an img that you are trying to use overflow:hidden, you must add the following style to the img:
-
* html img{
-
display:block;
-
}
Popularity: 28% [?]
August 30th, 2007 at 5:33 am
I ran into the same problem. The thing you have to do is set overflow: hidden on the element that has a width defined that cannot be overflown.
For example:
div#content { width: 300px; overflow: hidden;}
if you put an image in this div with a width that exceeds 300px the part that overflows will be hidden.
December 6th, 2007 at 1:19 am
Thanks, buddy. This is a good one. I pulled my hear in three places trying to solve this issue.
Your solution works, like a charm
May 29th, 2009 at 9:02 am
This bug seems to be in IE7 as well... overflow:hidden solved it, thanks