The IE Three Pixel Text-Jog    

• Return to Explorer Exposed
• Next IE demo

This is an IE only effect

Please look closely at the test box to the left. Observe how the text at the top does not quite touch the blue bordered float on the left. The text should touch the float, but instead it seems to have a 3px padding, keeping it away from the float.

Now see how in the black bordered paragraph the 3px space is still there. The left edge of the paragraph is way over on the left edge of the test box (behind the float), but the space is still evident. This implies that the space is connected to something in the <p>, not the <p> itself.

But just what is in the <p>?

Only text, which also means 'line boxes'; invisible 'anonymous' boxes that contain inline text, images, and anything else that is declared 'inline'.

So apparently IE is adding 3px of space to the end of the line boxes in this demo if they touch the float. Now cast your eyes down to the bottom of the test box. Observe how the 3px space is evident even tho the red bordered box (#jog-box) is left margined far enough to separate it from the float. This means that the added 'space' is applied to the line boxes that are adjacent to a float, not just to ones that are touching the float.

Here's the tricky part

Observe how the 3px space abruptly ends at the same vertical height that the float also ends. (!) It's now clear that the float is causing the 3px space to be added to the line boxes. In fact, if the blue box were floated to the right, the space would be appended to the right end of the line boxes.

The close-up image at the lower left shows the 'text-jog' that results when the float is passed by. It is this 'jog' that is the main problem, causing a small but irritating blemish on otherwise flawless layouts.

Special Note: If the float is an image (or presumably, other generated content), then the 3px line box space is NOT applied by IE. Sadly, IE5.x/win does not leave it at that, but in the event of a floated image, a proprietary 3px margin is applied to both the left and right sides of the image.

Unlike the 3px line box space, these unfortunate margins can be hacked away by use of the Tan hack, thus:

Using '* html' before the target element keeps all but IE from recognizing it as a real selector. IE thinks there is a wrapper element surrounding 'html' and so does obey all rules within this block. The second 'ma\rgin' is ignored by IE5.x/win, so IE6 and IE5/mac get the non-hacked margin values. For more on the Tan hack see this page.

Conclusion

I cannot find any way to prevent the 3px line box space, other than applying a 'width' to the elements following the float. Beware; Doing this will throw IE into its proprietary 'IE float model' behavior, making it vary wildly from all other browsers.
See The Float Model Problem.

Thanks to Ellen Herzfeld for timely testing of various Explorer versions.

Big John   Contact me ©positioniseverything
Last updated: May 4, 2003
Created January 18, 2003