Magik Creeping Text

Return to Explorer Exposed
Next IE demo

This is an IE/5.5/6/Win only bug, triggered by nesting one block element inside another, and giving the following styles to the outer element:

   div {
   border-left: 1px solid red;
   padding-bottom: 1px;
   }

Note: All that is required is a left border and a bottom padding. The size and units don't matter.

Then repeat this set at least twice. The second and following sets trigger the bug.
Screenshot

When triggered, the bug pushes the text in the inner element (but not the element itself) to the left an amount equal to twice the width of the left border. The outer divs in the first group have 1px borders; the second group have 10px borders (short red lines). Each group is in its own static div. Notice that with each repetition the error is added to the previous errors!

What the heck is going on here?

The first three sets in the second group have no nested inner div, and so do not show the 'creep'. Notice once again that the second static div picks up where the first leaves off. (if not, reload) Also, when the creeping text runs out of left padding (in the absolutely positioned grey container box) the letters outside the container get cut off.

The third group down below is in a seperate absolute div, and displays some of the effects a hovered link background can have on the creep. The yellow backgrounds on the inner divs seem to prevent the partial loss of the red border, but otherwise don't help.
Reload to reset the effects.

The fourth group at the bottom shows that this effect is not confined to the left side only, but can also occur on the right, given a right border trigger. It can even happen on both sides at the same time! Strangely, links do not seem to have any effect on the right creep, as with left creep. I can live with that. In fact, if there is any right creep, it seems to prevent hovered link action on the bug entirely. Notice how with 'right creep' the wrapping point is what creeps. Right aligned text will also be affected the same way.

I believe it's the anonymous 'line boxes' (all inline content generates them) that are getting larger under the influence of the bug. To prove it, I placed bordered <span>s on the text lines. Interesting. I also right-aligned the last five sets, which clearly shows that both ends of the invisible line boxes are getting extended.

See Eric Meyer's Inline Model Document for more on the line box topic.

Fixes: Just avoid the bug trigger combo entirely.
Or you may give those outer nested divs a bottom border, which kills the bug. Only a bottom border will do! Giving the inner divs bottom borders only cuts the creep in half. The other borders do nothing. Really weird.

There are several other wrinkles to this; Frankly, it's just too variable to go into details. You'll have to work out whatever problems arise, and with what you now know, it shouldn't be too hard. (pardon me while I creep away)

Thanks to Holly Bergevin for bug hunting help.