IE4 / IE5 Rendering Differences
DIV element width

Author Intent

To display a nested DIV element using a percentage CSS width value.

In our example, the DIV is nested within a BLOCKQUOTE element. We want the DIV to be as wide (100%) as the BLOCKQUOTE display.

HTML

<BLOCKQUOTE>
<DIV STYLE="width:100%;color:white;background:blue">Some Content here</DIV>
</BLOCKQUOTE>

Your Browser Result (Live)

IE4 - IE5 Results (Illustrated)

IE4	IE5
IE4 displays the DIV with a width inherited from the BODY of the page, not the BLOCKQUOTE element. Its left position corresponds to the BLOCKQUOTE left margin, but it runs off past the BLOCKQUOTE right margin.	In IE5, we get the expected rendering. The DIV is constrained by the margins set by BLOCKQUOTE.

The IE4 rendering is obviously confused. The DIV positioning is relative to the BLOCKQUOTE, but the width is not. It is a behavior problem fixed in IE5.

Solution

There is no sure-fire way to align the rendering behavior of the two browsers. However, to mimimize the possibility of the problem occuring, you can do one of the following:

• Avoid nesting DIV elements in elements that render relative to window size, like BLOCKQUOTE.

• If the DIV width is to be 100%, omit the width property. The DIV width will default to 100% and display correctly on both browsers.

General Note

In IE4, the width property is fairly problematic. You will find problems when applying it to the P and other block elements, as well. Always test your pages with both browser versions!

The IE4 width problem can also affect your text alignment, as we shall see on the next page.

Produced by Peter Belesis and

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Workers Say Telework Is More Productive, Bosses Not So Sure · Kingston Debuts Power-Saving Memory Upgrades · Social Networking is King: Facebook Edges Google

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

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