hasLayout.net

Affected Versions

This bug affects: IE7, IE6

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 - IE6 and 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 - <div> in our demo - that has certain width set. Inside that element we have another one - <p> - with margin-right set to anything but zero (margin is not required in IE6). Inside that <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 <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 <p> would fix the bug in IE7 (not IE6). 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 - <span>s. The letter is no longer duplicated neither in IE7 nor in IE6.

Comments

• anon

  Sun May 29 18:07:47 2011

  nevermind it's working with !important
  thx!

• anon

  Sun May 29 08:57:24 2011

  This fix doesn't work if the floated element which has a duplicated letter is a label.

• Dheeraj Grover

  Wed Dec 16 11:57:44 2009

  Thanks a lot. It was precise and perfect example. cheers!

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: