3px Indent

3px Indent Against Floated Elements

This bug affects Internet Explorer.

A common experience for web coders including myself is an unintended additional 3px indent of content placed beside floated elements. This is a very common occurence on ABS and can be reproduced easily. Elements next to floated elements exibit the bug.

In the screenshot above take note of how each item in the list except the last one is pushed to the left by 3 pixels. The last one is not indented because the content floated on the left has already ended.

Bug Fix

The problem with fixing this bug is that it will create new undesired effects in other browsers when using an obvious fix such as a negative 3 pixel margin. A different technique as well as a CSS hack is needed.

To solve the bug, use CSS in order to specify the height of the element that exibits the 3 pixel indent. Since the height for various elements such as paragraphs and lists often vary, set the height to 1%. The content will then stretch to the real full height.

Some browsers, such as IE for Macintosh may possibily understand 1% as the total height, and therefore only display the first 1% of the content you are trying to fix.

The following code is a CSS hack that prevents IE for Macintosh from parsing the code.

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html ul {
height: 1%;
}
/* End hide from IE5/mac */

Change ul to the element you are attempting to fix the bug on.

To learn more about why you need this fix, read On Having Layout where it is explained you need a fix to force hasLayout=True to your element.