spacer

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

home / experts / dhtml / column27
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Logo

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

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

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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