spacer

home / experts / dhtml / column26
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

Logo

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)

IE4IE5

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

All Rights Reserved. Legal Notices.
Created: Oct 19, 1999
Revised: Oct 19, 1999

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