DHTML Lab - dhtmlab.com - IE4 / IE5 Rendering Differences | 5

IE4 / IE5 Rendering Differences
text alignment in positioned elements

Author Intent

To align positioned element content without specifying a width value for the element.

HTML

<DIV
 STYLE="position:absolute;text-align:center;background:red;">
    I am in the center??</DIV>

Your Browser Result (Live)

I am in the center??

IE4 - IE5 Results (Illustrated)

IE4	IE5
IE4 creates a positioned element as wide as the containing element. In the screenshot above, the containing element is the BODY.	IE5 correctly expands the positioned element to contain the content, but since no `width` is specified, the text alignment seems to be overlooked.

As mentioned on the previous page, IE4 has problems with the width property. The DIV element is an HTML block element. It can also be a CSS-positioned element. When it is a block element, it should default to the full page width, like other block elements (P, for example), and we have come to expect this.

A positioned element, however, must have a width property specified, as it exists outside the normal page flow, and has no offset parent to inherit from.

IE4 erroneously treats positioned elements like block elements as far as width is concerned. Many authors have written their pages to conform to IE4 rendering, treating the width property as redundant when a full page width is required. With the introduction of IE5, some pages no longer display as intended.

Solution

Always include the width property in a positioned element.

On the next page, we'll look at a problem with modal dialog sizing.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column26/textalign.html