DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 14 | WebReference

DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 14

Logo

Dynamic Headline Fader, Version 3.0
IE4.0mac positioning


IE4.5 for Macintosh will give us this display of our example element:

Since the positioning was correct to begin with, the size fix was all that was needed to produce the desired look.

IE4.0 and 4.01, of course, still have problems:

The IE4.0, IE4.01 Positioning Fix

We need to move the Fader to the right and lower on the page by the value of errorOffset (the padding and border-width), but only if versions 4.0 or 4.01 are being used (i.e. not 4.5):

...
with (elFader.style) {
    errorOffset = (IE4mac) ? (FDRboxPad + FDRborWid) : 0;
    width = FDRboxWid - (errorOffset * 2);
    height = FDRboxHgt - (errorOffset * 2);
    if(IE4mac && !IE45mac){
        pixelLeft = elFader.offsetLeft + errorOffset;
        pixelTop = elFader.offsetTop + errorOffset;
    }
    ...

We establish the current position of the element by retrieving the offsetLeft and offsetTop property values. To these we add the errorOffset and assign the new values to the element's style pixelLeft and pixelTop properties.


Note:
We've used the non-CSS offsetLeft and offsetTop properties to identify the element's position. Remember that position properties for the Fader are optional. (For example, you may have specified position:relative, with no left/top values) Therefore, the Fader's position may not be reflected into CSS (pixelLeft/pixelTop, left/top, etc), but only into the DOM (offsetLeft/offsetTop).


Now we have our Fader correctly sized and positioned for IE4mac. We'll return to this browser later for more quirk-fixing but first, let's give the Fader additional functionality.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999

URL: http://www.webreference.com/dhtml/column27/fade3iemacpos.html