hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

Element drops below floated element with italized text.

Date of the Tutorial

Fri Jul 17 02:27:17 2009

Description

Yet another float bug in IE, in this case no one would suspect that it is caused by the italics in the floated element. Let's take a look at the bug in the demo.

Demo

HTML Code:

<div id="container">
    <div id="bugger">
        Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. Suspendisse vel
        velit at ipsum tristique porttitor. Suspendisse
        potenti. Nam non arcu sit amet nulla volutpat
        bibendum. Aenean eget metus. Nulla elit.
        Quisque aliquam luctus diam. Curabitur at
        lectus. In hac habitasse platea dictumst.
        Nam ultrices porttitor dolor. Morbi metus.
        Praesent et nulla at pede elementum consectetuer.
        Donec sapie...
    </div>
    <div id="victim">*cry*</div>
</div>

CSS Code:

#container {
    width: 500px;
    overflow: hidden; /* just containing floats */
}
    #bugger {
        float: left;
        width: 300px;
        font-style: italic;
    }
    #victim {
        width: 200px;
        height: 200px; /* just to make bug more obvious */
        float: left;
    }

Apparently the extremely advanced IE's rendering engine thinks that italized text needs three extra pixels of space to fit. Nothing new, we are all familiar with the fact that IE likes to expand everything, it's claustrophobic. However, since we have a pretty tight spot in our #container, those extra three pixels cause our second element #victim to drop below the floated one.

Solutions

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

Solution (Conditional Comments Solutions)

Date of the Solution

Fri Jul 17 02:42:30 2009

Fixed Versions

all of the affected

Description

This solution uses Conditional Comments to target affected browsers only. We will use negative values for margin property to remove the excessive space.

HTML Code:

<div id="container">
    <div id="bugger">
        Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. Suspendisse vel
        velit at ipsum tristique porttitor. Suspendisse
        potenti. Nam non arcu sit amet nulla volutpat
        bibendum. Aenean eget metus. Nulla elit.
        Quisque aliquam luctus diam. Curabitur at
        lectus. In hac habitasse platea dictumst.
        Nam ultrices porttitor dolor. Morbi metus.
        Praesent et nulla at pede elementum consectetuer.
        Donec sapie...
    </div>
    <div id="victim">*cry*</div>
</div>

CSS Code:

#container {
    width: 500px;
    overflow: hidden; /* just containing floats */
}
    #bugger {
        float: left;
        width: 300px;
        font-style: italic;
    }
    #victim {
        width: 200px;
        float: left;
        height: 200px; /* just to make bug more obvious */
    }

Conditional Comments:

<!--[if lt IE 7]>
    <style type="text/css">
       #bugger { margin-right: -3px; }
    </style>
<![endif]-->

All the code is the same as in our original demo with the exception of condcoms. The conditional match in condcom matches any IE version below 7 which is exactly the versions which Italics Float Bug affects. Recall in the beginning of this tutorial I've mentioned that IE expands the element by three pixels. I have no idea why the magic number three, ask MS developers. The fact being is that is three pixels, same as three pixels in the sibling of this bug, the Three Pixel Gap Bug

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 02:33:58 2009

Fixed Versions

all of the affected

Description

Nothing special to this solution. All that we are adding is one line of code, overflow: hidden in particular. This does the trick of hiding the excessive space that IE puts in the wrong place. Here is our original demo with the fix applied to it:

HTML Code:

<div id="container">
    <div id="bugger">
        Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. Suspendisse vel
        velit at ipsum tristique porttitor. Suspendisse
        potenti. Nam non arcu sit amet nulla volutpat
        bibendum. Aenean eget metus. Nulla elit.
        Quisque aliquam luctus diam. Curabitur at
        lectus. In hac habitasse platea dictumst.
        Nam ultrices porttitor dolor. Morbi metus.
        Praesent et nulla at pede elementum consectetuer.
        Donec sapie...
    </div>
    <div id="victim">*cry*</div>
</div>

CSS Code:

#container {
    width: 500px;
    overflow: hidden; /* just containing floats */
}
    #bugger {
        float: left;
        width: 300px;
        font-style: italic;
        overflow: hidden; /* bug fix */

    }
    #victim {
        width: 200px;
        float: left;
        height: 200px; /* just to make bug more obvious */
    }

Pretty straight-forward. We are setting overflow: hidden on #bugger, the element with font-style: italic applied, and that causes the bug to be hidden.

Depending on what your situation is like, applying overflow: hidden may not be favorable. If that's your case, you will be interested in the "Conditional Comments" solution.

Comments

Currently there are no posted comments.

Donate / Buy My Books

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

Alternatively, purchase my book: