Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

Leaking Background Bug

Affected Versions

This bug affects: IE6

Symptoms

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

Date of the Tutorial

Fri Jul 17 11:36:49 2009

Description

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.

Demo

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:
<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:
#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.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 11:51:31 2009

Fixed Versions

all of the affected

Description

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 "Solution LS". Here is our original demo with the fix applied to it:

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:
<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:
#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 "Solution LS".

Solution (Layout Solution)

Date of the Solution

Fri Jul 17 12:07:33 2009

Fixed Versions

all of the affected

Description

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.

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:
<div id="container">
    <p id="bugger">Floated</p>
    <p>Text</p>
</div>
<div id="victim">Give me some of that background!!!</div>
CSS Code:
#container {
    background: #abc;
    overflow: hidden;
}
    #bugger {
        float: left;
        width: 30%;
    }
Conditional Comments:
<!--[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.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia