Floppy drives.

Close up:

'nuff said.

I did a brief web search for this bug when it reared its ugly head, but came up empty. So either I just didn't search well enough, it hasn't been documented, or I've discovered a new IE rendering bug. Likely I didn't look hard enough, I'm sure.

IE6 incorrectly treats text-indent for the contents of (at least) the p element when the contents start with child element with a negative text-indent.

Take this code, for example:

<div style="border: 5px solid #aaa; width: 20em; margin: 1em auto">
  <p style="margin: 0; padding: 0">
    <span style="text-indent: -30px">OOO</span>XXX
  </p>
</div>

FireFox 2.0.0.6 correctly renders the code like this:

IE6 renders like this:

IE brand of flare

IE's rendering is incorrect in the following ways:

1. Per the spec, text-indent only applies to block elements, so should be ignored in this case
2. Also per the spec, the visibility of text overflowing the container should correspond to the value of the overflow property (which should default to visible)

Adding insult to injury

Now let's make it a bit more interesting. Floating the span will convert it to a block element automatically, whereby it meets the requirements to apply the text-indent.

<div style="border: 5px solid #aaa; width: 20em; margin: 1em auto">
  <p style="margin: 0; padding: 0; color: #00f">
    <span style="text-indent: -30px;float: left; color: #f00">OOO</span>XXX
  </p>
</div>

Here's how FireFox 2.0.0.6 correctly renders it:

and with text-indent: 30px

And what IE does with it:

and with text-indent: 30px

So let's add to the list:

3. The text-indent assigned to the span was also applied to the p!
4. A side effect of #3 is when using negative indenting, the parent's content can overlap the child's content
5. Another side effect of #3 is that the p content can leave its container.

More to point #5

For clarity, now that we have a proper block element implementing the negative text-indent, you can see what should happen with the p content when the floated span leaves the container.

<div style="border: 5px solid #aaa; width: 20em; margin: 1em auto">
  <p style="margin: 0; padding: 0; color: #00f">
    <span style="text-indent: -9999em;float: left;color: #f00">OOO
  </p>
</div>

Here's how FireFox 2.0.0.6 correctly renders it:

And IE:

I've got nothing

I'm unhappy to report that while similar to the IE doubled-margin bug, this case isn't fixed by applying display: inline.

I have no fix. I don't believe I've ever debugged IE applying a style property to the assignee's parent element, so I'm at a loss. The text-indent shouldn't be reverse-inherited to the containing p. That much is clear. I haven't spent much time "researching" a fix, so I have no suggestion other than to berate IE6 with renewed vigor and change your markup or style in disgruntled defeat.