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

home / experts / dhtml / column27

Developer News

Eclipse Helios Update Brings New PHP Tools

Internet Explorer 9 Ups Standards Support

JBoss Portal 5 Release Easier to Use

Dynamic Headline Fader, Version 3.0
IEmac 4.0 vertical spacing

The Problem

When we display more than one headline, the headlines do not get vertical spacing between them, even though each headline is enclosed in a paragraph tag.

To illustrate this, let's hard-code a Fader with in-line styling:

<DIV ID="elFader"
     STYLE="position:absolute;width:122;height:100;padding:5;
     font-family:sans-serif;font-size:12pt;font-weight:bold;
     border:4px maroon solid;background:white;
     text-align:center;line-height:12pt">
        <P>The Dynamic Headline Fader is Back!</P>
        <P>This time it can swim, too!</P>
</DIV>

The above displays in IEmac 4.0 as:

Does IEmac 4.0 not understand even the paragraph tag? Doesn't it know that one line of vertical spacing is standard rendering between paragraphs?

Of course it does. What it also does is override paragraph spacing when a line-height is specified! Inter-paragraph spacing is given the same value as inter-line spacing! This behavior was fixed with IEmac 4.01.

The Solution

Since we cannot avoid using line height (it is one of our parameter variables - FDRlinHgt), we must force an extra line break between items. This is easily accomplished by conditionally adding a <BR> after every headline:

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>";
    }
    if(IE40mac) tempStr +="<BR>";
    newsCount += 2;
  }
  return tempStr;
}

To illustrate the change, we can modify our hard-coded example to read:

<DIV ID="elFader"
     STYLE="position:absolute;width:122;height:100;padding:5;
     font-family:sans-serif;font-size:12pt;font-weight:bold;
     border:4px maroon solid;background:white;
     text-align:center;line-height:12pt">
        <P>The Dynamic Headline Fader is Back!</P>
        <BR>
        <P>This time it can swim, too!</P>
</DIV>

Which gives us this, correct, display in IEmac 4.0: