Echo Web Framework

Virtual Positioning is a feature of the Core.Web library that works around the Internet Explorer 6 issue of not allowing "four sided" CSS positioning. Specifically, IE6 will disregard the value of "bottom" and "right" CSS style attributes if a "top" or "left" (respectively) attribute is also provided. This is probably the most significant break from the CSS spec present in IE6, and if not rectified, has serious consequences to the ability to control how content is displayed on screen and which areas expand and contract to fill a resizable region.

The Virtual Positioning system solves this problem by calculating the "width" and "height" style attribute setting necessary to simulate the ignored "bottom" and/or "right" setting specified in an element's style. While the calculation itself is entirely automated, it is necessary for a JavaScript program to specifically notify the virtual positioning system each time an element which requires four-sided positioning may have been resized.

For example, let's say we have the following element:

<div style="position:absolute; left:20px; right:100px; top:50px; bottom:80px;">Foo</div>

Invoking the following code after the element is initially rendered, and any time its container may have resized will virtually position the element correctly in IE6.

Core.Web.VirtualPosition.redraw(element);

If the browser environment is NOT IE6, the call to redraw will simply return immediately (it is not necessary for you to do such a check yourself).

If the browser is IE6, it will first calculate the size of the containing region. For the example's sake, let's say that size is 600 pixels horizontally by 400 pixels vertically. The virtual positioning system will calculate that the width of the object should be 600 (width) pixels - 20 (left) pixels - 100 (right) pixels. It will thus set the "width" attribute to 480 pixels. Likewise the "height" attribute will be set to 400 (height) pixels - 50 (top) pixels - 80 (bottom) pixels, i.e., 270 pixels. The positioning algorithm will work for non-pixel based values as well (all values will simply be converted to pixels using the Core.Web's measuring system).