hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

Last character of a floated element is duplicated.

Date of the Tutorial

Tue Aug 18 11:31:50 2009

Description

Here's another bug I found on Gérard Talbot's IE7 Bug Collection Page. I honestly couldn't help but giggle at this bug - IE7 duplicate the last character. Let's take a look at the demo:

Demo

The demo is available on a separate page

HTML Code:

<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
    </p>
</div>

CSS Code:

div {
    width: 100px;
}
p {
    margin-right: 1px;
}
span {
    float: left;
    width: 120px;
}

The setup is as follows: we have an element - ' element"><div> in our demo - that has certain width set. Inside that element we have another one - ' element"><p> - with margin-right set to anything but zero . Inside that ' element"><p> we have three elements with float property set to value left and width set to a larger value than we have set on our ' element"><div>. What happens in affected browsers? Last character - "C" - is duplicated on the next line. I've emphasized that there are three floated elements, the reason for that is that if it's less than three - bug doesn't happen; if it's more than three, the "Float Squeeze Weird Gap Bug" happens.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Tue Aug 18 11:32:52 2009

Fixed Versions

All of the affected

Description

Note: this bug is also fixed by the CS solution to "Float Squeeze Weird Gap Bug"

We are going to fix this bug with the IE-bug-fixing Swiss Army knife. No, I am not talking about "layout", even though setting it on our ' element"><p> would fix the bug in IE7 . Let's see what we have here:

Fixed demo is available on a separate page

HTML Code:

<div>
    <p>
        <span>A</span>
        <span>B</span>
        <span>C</span>
    </p>
</div>

CSS Code:

div {
    width: 100px;
}
p {
    margin-right: 1px;
}
span {
    float: left;
    width: 120px;
    position: relative;
}

The only thing that has changed is that we have added position property set to value relative on our floated elements - ' element"><span>s. The letter is no longer duplicated neither in IE7