Codingdomain.com

Introduction

When a web site is built according to the CSS2.1 specifications, there is one major player that deserves a special article. It's important to understand the issues of Internet Explorer. A web page may look right, but rely on rendering bugs of this browser. Bugs that likely get fixed in a next version!

Internet Explorer appears to have two mechanisms for positioning elements. Some CSS-properties are known to trigger the other layout mechanism, which can be used to avoid some of the bugs.

A list of bugs

Floats appearing with a double margin

Floats will always appear with a double margin. So a margin of 5 pixels actually appears as 10 pixels. This can be used by adding a display: inline; properly for each element that has a float property.

The display property has no meaning at all for floating-elements, but it does solve this problem. When unsetting a floating-element with float: none;, the display property will have to be reset as well!

Floats not appearing at all

Floats with a 3 pixel text jog

Repeated contents after a float

Clearing elements don't clear all preceeding elements

Containers appearing to have a clear element inside

When a container element has a size, it automatically encloses the float, as if there is an clear element inside the container.

Elements appearing with a different width/height

Expanding elements on unbreakable text

When an element is restricted to a certain width, Internet Explorer keeps expanding the element when it can't break up a long word. There are two possible work-arrounds: word-wrap: break-word (a non-standard attribute!) and overflow: hidden. Each workarround has it's own side-effects, which are clearly explained in the following position-is-everything article.

A similar effect occurs for the height of elements. When a box is forced to have a small size (e.g. 0.1em or 0.1%), it actually expands to fill it's entire containing parent. Note that a value of 0.1% may actually not cause this effect for very long pages!

Justified italics text

Fix for justified italics text:

/* \*/
* html .fix-italics {
  overflow:  hidden;  /* for MSIE 5.x */
  width:     100%;    /* for MSIE 5.x */
  o\verflow: visible; /* for MSIE 6   */
  w\idth:    auto;    /* for MSIE 6   */
  he\ight:   1px;     /* for MSIE 6, give it some box dimension */
  word-wrap: normal;  /* reset any word-wrap: break-word; tags */
}
/* */

Horizontal rules without color

The color of the hr tag can be set with the background-color attribute. Assign the same value to the color attribute too to see the color in Internet Explorer.

Negative margins are not applied

Negative margins can be used to move an element out of it's container. These margins don't have any effect in Internet Explorer until the element has a position: relative;.

text-align also aligns block elements

In Internet Explorer 5.x, a text-align property also affects block elements. This effect can be abused to create a fake auto-margins effect, theirby centering the element.

There is a element above the html root

Internet Explorer seems to think there is an other element above the html tag, so the selector * html .something actually works. This bug will be fixed with Internet Explorer 7, but it can be used to feed specific rules to Internet Explorer 5 and 6.

Writing exceptions

The box model