[SmartzKool]

Hello guys,

I am having a link problem with firefox. I am trying to link the full td with a url. It is working fine with IE but it doesn't work in Firefox. I am using the following code -

<td valign="top" class="style4">
<a href="page.htm" style="display:block; cursor:pointer; text-decoration:none;">
<script type="text/javascript">
 
var delay = 4000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
 
var fcontent=new Array();
begintag='<div style="font: normal 10px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="Text sentence 1";
fcontent[1]="Text sentence 2";
fcontent[2]="Text sentence 3";
fcontent[3]="Text sentence 4";
fcontent[4]="Text sentence 5";
closetag='</div>';
 
var fwidth='99%'; //set scroller width
var fheight='68px'; //set scroller height
 
var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.
 
///No need to edit below this line/////////////////
 
 
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
 
 
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}
 
function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}
 
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {  
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);
    
  }   
}
 
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
 
if (ie4||DOM2)
  document.write('<div id="fscroller" style="width:'+fwidth+';height:'+fheight+'"></div>');
 
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
 
</script></a></td> 

Here the style which i am using in the td -

.style4 {
    font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    background-color: #F4F4F4;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    text-align: left;
} 

Please Help as soon as possible.

- SmartzKool

[TwoD]

The problem is that you can't place a block element like the div inside a non-block element, the link, while the page is being constructed. Firefox solves this by moving the div tag outside the link. And since it is placed after the link, and it's not possible to z-index sort them because they are not absolutely positioned, the div is placed above the link and covers it.

One way to get around that is to print the link inside the innermost div.
Remove the link from the source, then print it dynamically on the page, here.

document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
becomes
    document.getElementById("fscroller").innerHTML=begintag+'<a href="page.htm" style="display:block; cursor:pointer; text-decoration:none;">'+fcontent[index]+'</a>'+closetag 

Note that search engines won't be able to find the link now as they don't execute scripts. So you might want to place a link to that page somewhere else too in case it's important. Same thing goes for humans if they have JavaScript disabled.