ie6 bug, text cropped inside div

Question

i have this this simple div :

<div id="error_message">Some bad things happened here, sorry... try again later!</div>

and this css:

#error_message
{
     width:170px;
     height:44px;
     color:green;
     font-size:15px;
     margin-left:10px;
     text-align:center;
}

ok, as i expected ie6 kicks my butt again :D so what it does is to actually "cut" my text and it displays just "sorry... try again later!" i google it without any satisfying result. Do you have any antidote for this?

Answer 1

Try not setting a height. you don't need it anyway.

Answer 2

put the text inside <p> </p>
if it doesn't work try removing the comma or the width

another thing you should check too is the margin if the container of that div has the same width as his child well then maybe ie is pushing the margin left above the div (hiding the beginning of the sentence)

try this in order:

• add <p> </p> inside the div
• remove the comma
• remove the width
• remove the margin
• trigger haslayout
• display:inline on the div

Answer 3

Isn't the width the problem? 15px is fairly big font size and 170px isn't a lot of room. Try increasing the width (or just removing it). First set 'width: 100%;' to see if that is the problem, then start cutting it back until it fits.

Answer 4

This sounds like the infamous IE6 disappearing text bug.

http://www.google.com/search?q=ie6+disappearing+text

Historically, the fix is to style a parent div of your problem div with position:relative. If it works, you're in luck.

What causes the problem in the first place? One guy says:

This effect may turn up in a number of different contexts. We would try to list them here, but the page would become very long, and make our heads hurt.

-- http://www.positioniseverything.net/explorer/peekaboo.html

Have fun :)