Solprovider Lenya Kongregate Registration for Free Flash Games and Chat with solprovider

Text disappears in MSIE when using HR tags

Using HR (Horizontal Rule) tags with CSS and DIVs can make text disappear in Microsoft Internet Explorer. If you highlight the text, or scroll the window so the text is off the screen and back on, it appears. But if you highlight text including the HR, then un-highlight it, the text disappears. The conditions that cause it are weird, but consistent. In the example below, adding text between the HRs makes it work properly, but I could not find a general rule to determine exactly when this problem would occur.

Put this text in a file named "badmsie.html" and open it using Microsoft Internet Explorer 6. If you highlight the first line, the missing text will appear.

<HTML><HEAD><TITLE>Disappearing Text in MSIE</TITLE><STYLE>
#test { BACKGROUND-COLOR: #FFFF00; }
</STYLE>
</HEAD><BODY><DIV id="test">
Peek-a-boo!
<HR><EM></EM><HR>
Does anybody at MS know how to program?
</DIV></BODY></HTML>


My solution was to replace all the HR tags with:
<img src="/images/hr.gif" height="2" width="100%"/>
and put a single pixel grey GIF in the {pub}/resources/shared/images directory.

Lenya added the "border" and "alt" parameters, and removed my close tag, so the final result is:
<img border="0" src="/images/hr.gif" alt="" height="2" width="100%">

<< CSSAnnoyances >>

Contact Solprovider
Paul Ercolino