Fixing Disappearing Text or Incorrect Element Widths in IE6
IE6 non-compliant behavior
When testing my own blog in Internet Explorer 6, I noticed that the text inside some posts was randomly disappearing. An example of what this looks like in IE6 is to the left. There can be several reasons why this happens, but the main reason is that following a "floated" element, IE6 sometimes loses track of the width of elements that don't have a height specification, no matter what value it is.
A floated element is one, such as a DIV or SPAN, upon which a CSS rule specifying "float:left;", "float:right;", or "float:none;" has been applied. Hovering your mouse over such elements randomly causes them to reappear.
I primarily use Mozilla Firefox for surfing and development work because it is compliant with W3C valid CSS standards and has a host of cool and useful plugins, such as Firebug. Firebug has an inspection mode where you can reveal any page element's CSS or HTML code merely by just hovering over it. You can also "inject" CSS, HTML and script statements in real time or comment out existing CSS rules to immediately see how the content is affected by such changes (my favorite).
Click on the below screen shot of Firebug to see what it looks like in action (and to see what the non-disappearing text should look like)...
Firebug for Firefox screen shot
Unfortunately IE6 (and IE7 as well) is not CSS2 compliant. In fact, I often find myself writing custom CSS code to compensate for the CSS shortcomings in IE. This behavior is no exception.
You probably don't need to implement this unless you are seeing disappearing text or element widths (e.g. floating div elements) that are wider than they should be. If this is the case, you can create a custom class in CSS for this which forces the element to have a minimum height.
How to fix this:
First, add the following to your CSS file or inside of inline style tags:
* html .visualIEFloatFix { height: 0.01%; }
Then, for the element yielding the errant behavior, reference this class name in your CSS like this:
<div class = "post visualIEFloatFix">
<p>Some post content.</p>
</div>
There is a more detailed discussion of this if you are interested at Plone.org. I hope someone can use this information.
-Dan
Share this:
(4 votes, average: 5.00 out of 5)
Loading...
[…] Internet Explorer 6 is obsolete by any stretch of the imagination, and if you’re still using this version, you should consider upgrading for reasons of security and web standards compatibility. There really isn’t a good reason to keep using it except if you develop web sites and need to test content layout and functionality for the dwindling minority of Internet surfers who are still using this outdated technology. This article discusses a common bug faced by web developers designing for an audience that is still using IE6: Fixing Disappearing Text or Incorrect Element Widths in IE6. […]