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

Dynamic Headline Fader, Version 3.0
IE4mac positioning and sizing

IE4 for Macintosh handles the CSS width, border and padding properties differently than IE4+ for Windows. For example, let's assume we want to create a Fader, or any positioned element, that is 150 pixels wide and 80 pixels tall. We want this element to have a border of 4 pixels and internal padding of 5 pixels. In other words, what we would expect to get using this tag:

<DIV ID="elFader"
     STYLE="position:absolute;width:150;height:80;padding:5;
            border:4px maroon solid;top:80;left:100;"></DIV>

The Desired Display

If we added some text to the element, we expect it to look like this, as it does in IE for Windows:

The Display in IE for Macintosh

IEmac 4.0 and 4.01 give us this display:

The left and top positioning values are not applied to the element, but to its content! Then the padding and border values are appended on all sides. Both the size and the positioning are not what the author intended.

IEmac 4.5 is only a bit better:

Here, the left and top positioning values are applied correctly to the element, but the padding and border values are still appended to the element size. Again, the display is not what the author intended.

Fixing the Size

Fader sizing is applied in the FDRinit() function, our longest function, called once to style and initialize the Fader object, based on the author's parameter variable values.

Recall that the IE-specific part looks like this:

...
with (elFader.style) {
    width = FDRboxWid;
    height = FDRboxHgt;
    backgroundColor = FDRbackCol;
    overflow = "hidden";
    color = FDRfntCol;
    fontWeight = FDRfntWgh;
    fontSize = FDRfntSiz;
    fontStyle = FDRfntSty;
    fontFamily = FDRfntFam;
    lineHeight = FDRlinHgt;
    textAlign = FDRtxtAln;
    cursor = "default";
    visibility = "visible";
    borderWidth = FDRborWid;
    borderStyle = FDRborSty;
    borderColor = FDRborCol;
    padding  = FDRboxPad;    
    filter = "blendTrans(duration=" + FDRblendDur + ")";
}
...

We'll insert these three statements in the beginning of the with statement, to correct the sizing problem:

errorOffset = (IE4mac) ? (FDRboxPad + FDRborWid) : 0;
width = FDRboxWid - (errorOffset * 2);
height = FDRboxHgt - (errorOffset * 2);

We declare errorOffset to store the padding and border-width integer values if IE for Macintosh is being used. For example, if the desired padding is 5 pixels and the border-width is 4 pixels, errorOffset will have a value of 9. If the user is not browsing with IE4mac, then errorOffset is given a value of 0 (zero).

Then, to get the desired width, we double errorOffset (to account for left and right padding and border errors) and subtract this value from the required width (FDRboxWid). We do the same for the height. Therefore, in a Macintosh environment, we end up creating a smaller element, which will become the desired size once the padding and border values are incorrectly appended.

Let's view the results of this workaround on the next page.

Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column27/fade3iemacsize.html