Inside Technique : Styling in IE5 : Improved Positioning

Internet Explorer 5.0 provides better control over positioining elements. In IE4, you are limited to positioning only certain HTML elements (eg., DIV, SPAN, INPUT, etc). In addition, to absolutely position the SPAN or DIV element, you are required to also specify a width.

IE5 removes these restrictions and lets you freely use the CSS-Positioning properties, float, and width, on almost any element. For example, you can now absolutely position a <P> simply by setting the position attribute to absolute, and giving the element a top position (eg., <P STYLE="position: absolute; top: 200px">). Also, you can constrain the width of any element, including inline elements such as B and EM, simply by specifying a width (eg., <P STYLE="width: 100pt">).

To demonstrate, below is a standard <P> element that has a 150pt width and a border. In IE4, the border is displayed but the width is not honored. This is because IE4 does not support the width attribute on a paragraph. Netscape Navigator 4.0, on the otherhand, supports the css width and border property, but they do not provide a way to dynamically manipulate the paragraph.

IE5 removes all these restrictions and allows complete dynamic modification of all position and float related properties. For example, IE5 supports dynamically changing the CSS position and float properties of the element. By position, we are not referring to the top, left, width, and height as those were dynamic in IE4, but the actual position property that determines whether the element is rendered in flow (static), offset from the flow (relative), or removed from flow and positioned (absolute). Below is a sample <P>aragraph whose properties can be modified if you are running IE 5:

Internet Explorer 5.0 removes all the restrictions on what elements can be positioned and even allows elements to be dynamically removed from the flow.

In IE5, the Demo allows you to dynamically turn the paragraph into a positioned element.

These improvements go far to add consistency to using CSS. Where these improvements really shine is when you start adding style to your own custom elements. IE 5 supports adding custom XML elements to your HTML document. These elements must get their entire presentation through stylesheets. Therefore, the more flexible and powerful CSS implementation you have, the more control you have over presenting your XML. Next we introduce how to add and display XML elements on your web page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.