hasLayout.net

Diagnosis

Affected browsers:

Internet Explorer versions below 7.

Visual appearance:

Background leaks out from the element onto other elements that are next in the flow.

Triggers:

Floats, use of clearer elements, background set on the container.

back to top

Overview

This bug is a close relative to Disappearing Content Bug, maybe even a counter part. It is common among CSS beginners to use what is known as a clearer element to contain floats in an element. IE is different in that respect. In IE, to be able to contain floats an element must have "layout". Unless that is true you will either get a Leaking Background Bug or Disappearing Content Bug (aka Peek-a-boo bug). Which one you will get depends on whether or not your clearer elements are touching a floated element when the page is rendered and whether or not you have some content inside container after or inside the clearer element. In either case, if container doesn't have "layout" you will get a bug.

back to top

Demo

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

Due to the nature of the bug, demo is displayed on a separate page. Typical code to produce the bug is demonstrated below.

HTML Code:

skip to CSS code

<div id="container">
	<p id="bugger">Floated</p>
	<p>Text</p>
	<div class="clearer"></div>
</div>
<div id="victim">Give me some of that background!!!</div>

CSS Code:

skip to content

#container { background: #abc; }
	#bugger
	{
		float: left;
		width: 30%;
	}
.clearer { clear: both; }

When the above code is rendered in IE version below 7, the background from #container will leak over the #victim as if that background was set on #victim itself. If you scroll the page, the bug vanishes.

back to top

Solution (CS)

The problem is steaming from the fact that you are not containing floats in IE with proper methods. Clearer elements are not needed in 99.9% of the cases, do not use them. Instead, use other methods, all IE needs is "layout" on the element that contains floats.

Even though this is a `Clean` type solution I recommend you ditch the clearer element and use `Layout` solution. Here is our original demo with the fix applied to it:

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

Due to the nature of the bug, fixed demos are displayed on a separate page. Typical fixed code for the bug is demonstrated below.

HTML Code:

skip to CSS code

<div id="container">
	<p id="bugger">Floated</p>
	<p>Text</p>
	<div class="clearer"></div>
</div>
<div id="victim">Give me some of that background!!!</div>

CSS Code:

skip to content

#container { background: #abc; }
	#bugger
	{
		float: left;
		width: 40%;
	}
.clearer { clear: both; }
#victim { float: left; }

The HTML code is the same as in the original demo even though you know already that you should not use clearer elements.

CSS code varies by a tiny bit. We have added #victim { float: left; }. Apparently this is enough to fix Leaking Background bug, however be prepeared for some other bugs that an extra float may cause. Ideally you should be using layout solution.

back to top

Solution (LS)

As I have said above, the problem is steaming from the fact that you are not containing floats in IE with proper methods. Clearer elements are not needed in 99.9% of the cases, do not use them. Instead, use other methods, all IE needs is "layout" on the element that contains floats.

To demonstrate the said above, I will fix the original demo by removing unnecessary clearer element and using other method to contain the float. In particular I will use the overflow property to contain floats in standards compliant browsers and will give #container "layout" to contain floats in IE.

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to condcom
• skip to content

Due to the nature of the bug, the fixed demo is displayed on a separate page. Typical fixed code for the bug is demonstrated below.

HTML Code:

skip to CSS code

<div id="container">
	<p id="bugger">Floated</p>
	<p>Text</p>
</div>
<div id="victim">Give me some of that background!!!</div>

CSS Code:

skip to condcom

#container
{
	background: #abc;
	overflow: hidden;
}
	#bugger
	{
		float: left;
		width: 30%;
	}

Conditional Comments:

skip to content

<!--[if IE]>
	<style type="text/css">
		#container { zoom: 1; }
	</style>
<![endif]-->

As you can see, we have removed the clearer element and used #container { overflow: hidden; } to contain our floats in sane browsers. We are also giving layout to #content using conditional comments which is the right method to contain floats in IE and which is exactly what is needed to prevent Leaking Background Bug. Read hasLayout tutorial to find the method that would work best for you.

back to top

Recommended Reading

• skip list
• CSS: float property
• CSS: overflow property
• Containing Floats
• IE hasLayout
• IE Conditional Comments

back to top

Comments

There are currently no comments for this article.

Feel free to post your comment. Only Comment field is required. Your e-mail will not be shown; specify it if you wish to be contacted.

Your comment

Your name:

Your e-mail:

Comment (required):

back to top

Advocacy

skip to copyright notice

Browsers

Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"

XHTML

Don't use it unless you understand it. Please take some time to read these articles:

• skip list
• WebDevout - Beware of XHTML
• WebDevout - Validity and well-formedness
• Ian Hickson - Sending XHTML as text/html Considered Harmful

CSS and Internet Explorer

Use Conditional comments

back to top