spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column27
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

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

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