Text "escaping" <p> and being displayed elsewhere (IE6)

[Wuhtzu]

Hey

 

I have the strangest of problems which only appears in Internet Explorer 6 (maybe older browsers too, but I don't care about those). Some text is "escaping" an <p>-tag and reappearing at the bottom of the page.

 

Check out this page in IE6:

http://humlebo.org/sleek/alpha_markup/specifik

 

Or this screenshot of the above page:

http://wuhtzu.dk/random/sleek_alpha_ie6_bug.png

 

As you can see the last 3 chars of text in the lowest "side box" is reappearing at the very bottom of the page. It's the "ig!" I'm speaking of. How the heck is that possible?

 

 

Sidebar markup:

<!-- Start #sidebar -->

<div id="sidebar">
<div class="box">
	<h2>Tilbud</h2>
	<p>Internet Explorer fåes med alle tænkelige slags bugs. Fandt du ikke den ønskede bug? Bare rolig, vi skal nok finde den til dig!</p>
</div>


<div class="box">
	<h2>Info</h2>

	<p>Internet Explorer fåes med alle tænkelige slags bugs. Fandt du ikke den ønskede bug? Bare rolig, vi skal nok finde den til dig!</p>
</div>
</div>
<!-- End #sidebar -->

 

Sidebar stylesheet:

#sidebar {
width: 250px;
float: right;
background: #000000;
height: 500px;
}

.box {
width: 220px;
background: #363636;
margin: 18px auto 0 auto;
padding: 0 0 10px 0;
}

.box h2 {
display: block;
background-color: #FFFFFF;
color: #777777;
font-style: italic;
font-weight: bold;
font-size: 80%;
padding: 0 0 0 4px;
margin: 0 0 10px 0;
}

.box p {
color: #FFFFFF;
font-weight: normal;
}

 

You are of course more than welcome to look at the source of the page http://humlebo.org/sleek/alpha_markup/specifik and the complete stylesheets http://humlebo.org/sleek/alpha_markup/style/master.css and http://humlebo.org/sleek/alpha_markup/style/reset.css.

 

Can any of you think of a fix or the reason why this happens? (except for IE being bugged )

 

 

Best regards Wuhtzu

[jumpenjuhosaphat]

That's quite odd.  I looked at your source code, and searched for "id!" and could only find 2 occurrences of it, but it occurs 3 times in the browser.  I thought maybe it was a javascript issue at first, but I couldn't find any JS.

 

Try figuring out which one of the div's it's happening to by changing the last word in your box's to be different.

[Wuhtzu]

Thank you for your quick reply.

 

You are right about the page containing no java script. I've translated the bottom box to english which changed the last word from "dig!" to "you!" So it is happening to the bottom box...

[bronzemonkey]

This bug is usually caused by two things - either an html comment or a float problem. Try removing the html comments after the elements in your sidebar, and use a proper clearing technique rather than a clearing div in your markup.

 

It's a bizarre bug that I've encountered a couple of times and managed to get around. If you get no luck with those suggestions try google for answers or check the IE bug list/solutions at "position is everything". good luck!

[Wuhtzu]

I hate this - IE, earlier versions, present versions and future versions, should b**n in h**l along with the source code so that it can never ever again be compiled. How come their engine f**ks this up? It is about time all websites optimized for IE stops working due to Microsoft patching their browser and that their 10^7 users call and tell Microsoft that the website doesn't work anymore... it looks weird!?

 

How can Microsoft just say this instead of fixing it?

 

What is "HasLayout" and why is it important?

 

There are several bugs in Internet Explorer that can be worked around by forcing "a layout" (an IE internal data structure) on an element (like, dimensional bug fixes and Holly hack).

 

But thank you very much bronzemonkey - it worked when I removed the comments, but not all of them, just the ones around the #sidebox. Will you please specify what you mean with proper clearing technique? Applying the clear property to some of the already existing elements instead of a "dedicated" "clear div"?

 

Now it's on the the next IE problem, which you will undoubtably hear about tomorrow

 

Wuhtzu