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

Dynamic Headline Fader, Version 3.0
IEmac text alignment

The Problem

When creating Version 2.01, we attempted to fix the IE4mac text alignment problem. That is, a value of "center" or "right" for FDRtxtAln seemed to be ignored.

We only got it partially right.

We added a <BR> at the end of each display string:

if(IE4mac) newsStr += "<BR>";

This, however, causes only the final line in the display to be correctly aligned. Thanks to Bob Peyser, here at WebReference for pointing this out.

For example, if our parameter variable declaration reads: FDRtxtAln = "center";, the result in IE4mac is:

Many tests later the true behavior patterns of IE4mac were identified:

In a positioned element, which the Fader is, the CSS text-align property is not applied, unless the content is enclosed in an additional block-level tag.

That is, this HTML produces correctly aligned text:

<DIV STYLE="text-align:center">
    Some content
</DIV>

whereas, this HTML does not:

<DIV STYLE="position:absolute;text-align:center">
    Some content
</DIV>

If we include a paragraph tag in the positioned element, the alignment kicks in:

<DIV STYLE="position:absolute;text-align:center">
    <P>Some content</P>
</DIV>

And we get the desired display:

The Solution

We must omit our old partial fix and always enclose the displayed item strings in paragraph tags.

Not only does this not affect those browsers which don't need the fix, but it helps to vertically space possible multiple headlines in the Fader. If each headline is a paragraph, then vertical space will be added between headlines. Therefore this fix is made available to all browsers:

function FDRmakeStr(){
  tempStr = "";
  for (i=0;i<FDRhdlineCount;i++){
    if(newsCount>=arNews.length) break;
    dispStr = arNews[newsCount];
    linkStr = arNews[newsCount+1];
    isLink = linkStr.length;
    if (isLink) {
      tempStr += "<P><A CLASS=newslink "
              + "HREF='" + prefix + linkStr + "'>"
              + dispStr + "</A></P>"
    }
    else {
      tempStr +=
        ((NS4) ? "<P CLASS=nolink>" : "<P>") +dispStr+"</P>";
    }
    newsCount += 2;
  }
  return tempStr;
}

All three versions of IE4mac have this problem and the display on all is now fixed...almost.

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/fade3iemacalign.html