IE 6 Float Bugs

IE 6 is one of the most used browsers for browsing the internet and is present due old hardware or software which are still in use and have not been upgraded. But IE6 does not support some CSS functionality hence, the techniques to work around these bugs are needed and usually consist of

  • Peek-a-boo bug: It involves the using of float property when some content disappears and occasionally reappears.
  • Guillotine bug: It comes up when using float property, where content is cut in half.
  • Three-pixel jog: It causes appearance of 3 pixel space if float property is used.
  • Double-margin bug: It doubles left or right margins of a floated element if float property is used.

All these bugs have been resolved in IE 7.

The Peek-A-Boo Bug – In it the content disappears and reappears at random hence, its name. It appears in IE 6 with the use of a left float or a right float or a background on the containing element. An example is given below

<head>

<style type=”text/css”>

body { background: #fff url(ph150_888.gif) fixed;     color: #000; }

.container {      background-color: #bbf; }

.float { float: left;         width: 200px; background-color: #f00; }

.clearB {          clear: both;      height: 0; }

</style> </head>

<body>

<div class=”container”>

<div>Sempre caro mi fu quest&#8217;ermo colle, e questa siepe, che da tanta parte de m&#8217;&egrave; dolce in questo mare.</div>

<div class=”float”>float</div>

<div class=”clearB”><!– –></div>

</div> <div>After.</div>

</body>

The CSS and markup results in the bug as the content in the ‘container’ element is missing. Resizing the window, trying to select the text, or dragging another window over this one makes parts of it to appear and disappear. The result in IE 6 when some text is selected, is shown as

IE 6 Float Bugs

This bug can be resolved by

  • A position: relative declaration to the containing element and floating element.
  • Check the margins of the clearing element from coming into contact with the floating element.
  • Inhibit applying a background to the containing element.
  • Direct the declaration ‘zoom: 1’ to the containing element.
  • Give the declaration display: ‘inline-block’ to the containing element.
  • Use a fixed width to the containing element.

The Guillotine Bug – In it only a part of the content disappears. It appears in IE 6 due to

  • An element is floated in a container element.
  • Links in the container element are in a non- floated content that appears after float ‘a :hover’ pseudo-class is used.

An example is given below

<!– Example Layout for a Guillotine Invoking Situation –>

<div id=”container”>

<div id=”floated”> This is the floated content. It is vulnerable to the Guillotine. </div>

This is the non floated content inside the container.

Guillotine invoking links should be in this content.

</div>

/* Example Style Rules for a Guillotine Invoking Link */

a:hover {

background: none #FFFFCC scroll repeat 0% 0%;

padding: 5px;

text-style: italic;

border-bottom: #0000FF 1px solid;

}

The lines of text are missing, chopped off at the edge of the container element. The result in IE 6 when some text is selected, is shown as

IE 6 Float Bugs 2

This bug can be resolved by

  • A clearing element must appear after the containing element as

.clear {
clear: both;
visibility: hidden;
}

<div class=”float”>Floated Content</div> <div class=”clear”></div>

The Three-Pixel Jog – It causes 3 pixels of blank white space to come between text inside an element that follows a floated element and the inner border of that element. IE 6 applies 3 pixels to any inline element next to a float, even if those elements are contained by a block level element

An example is given below

<head>

<style type=”text/css”>

#floatholder { position: absolute; left: 30px; top: 5em; border: 4px solid;

border-color: #fe6 #cb4 #a92 #ed5; width: 240px; background: #ec8;

}

#floatbox {

float: left;width: 65px; height: 17em;border: 6px solid #68f;

font-size: 1.2em; font-weight: bold; color: #46d;

}

#textwrapper { border: 2px solid #000; }

</style> </head>

<body>

<div id=”floatholder”>

<div id=”floatbox”>Float</div>

This text touches the blue float directly, and has the 3px space on the left.

<p id=”textwrapper”>

This text is wrapped in a paragraph (black border), and see, the space is still there, deep inside the &lt;p&gt;! </p>

<div id=”jog-box”>

This box is margined on the left, the width of the float and more, to keep it separate from the float.

Still, the space continues, until.. hey! Where’d it got to?! Well, it appears that: no adjacent float, no 3px space.

</div>

<div style=”clear: both;”></div>

</div> </body>

There is a space of 3 pixels between the text and the border. The result in IE 6 is shown as

IE 6 Float Bugs 3

This bug can be resolved by applying to the element which follow the float

  • a width
  • a height

It is applied as

<!–[if lte IE 6]> <style type=”text/css”>

p { height: 1px; }

</style> <![endif]–>

The Double-Margin Bug – In it the left margins on floated elements are doubled. It occurs due to

  • A containing element
  • A floated element inside the containing element
  • A left margin given to floated element

An example is given below

#content {

float: left;

width: 500px;

padding: 10px 15px;

margin-left: 20px; }

There is actually a doubling of the margin space. The result in IE 6 is shown as

IE 6 Float Bugs 4This bug can be resolved by applying to the element a display: inline declaration to the floated element.

Go To- Certified CSS3 Developer Tutorial

Get industry recognized certification – Contact us

Menu