Button activated vertical text scroller not working in Firefox

1

This code vertically scrolls text when the mouse is hovered over an up or down button. It works perfectly on its own - problem is when I put 2 of them side-by-side on the same page the page breaks in Firefox (as if padding has been added somewhere). Can anyone tell me what the problem is - or recommend an up-to-date version of this? I don’t really want to use Flash because the text needs to be constantly updated and it’s a pain with Flash.

Thanks
Charles

I have left out the JavaScript for the Scroll buttons because it works OK. The problem is with the CSS.


#divUpControlEvents {
  position: absolute;
  width: 320px;
  left: 85px;
  top: 420px;
  z-index: 1;
  text-align: right;
}
#divDownControlEvents {
  position: absolute;
  width: 320px;
  left: 85px;
  top: 600px;
  z-index: 1;
  text-align: right;
}
#divContainerEvents {
  position: absolute;
  width: 240px;
  height: 178px;
  overflow: hidden;
  top: 420px;
  left: 135px;
  clip: rect(0,320px,240px,0);
  visibility: hidden;
}
#divContentEvents {
  position: absolute;
  top: 0;
  left: 0;
}


#divUpControlNews {
  position: absolute;
  width: 320px;
  left: 485px;
  top: 420px;
  z-index: 1;
  text-align: right;
}
#divDownControlNews {
  position: absolute;
  width: 320px;
  left: 485px;
  top: 600px;
  z-index: 1;
  text-align: right;
}
#divContainerNews {
  position: absolute;
  width: 240px;
  height: 178px;
  overflow: hidden;
  top: 420px;
  left: 535px;
  clip: rect(0,320px,535px,0);
  visibility: hidden;
}
#divContentNews {
  position: absolute;
  top: 0;
  left: 0;
}

and in the body…Events…


<div id="divUpControlEvents"> 
 <a href="javascript:;" onMouseOver="PerformScrollEvents(-7)" onMouseOut="CeaseScrollEvents()">
  <img src="images/arrow-up-events.gif" border="0"></a></div>
        
<div id="divDownControlEvents"> 
 <a href="javascript:;" onMouseOver="PerformScrollEvents(7)" onMouseOut="CeaseScrollEvents()">
  <img src="images/arrow-dwn-events.gif" border="0"></a></div>
        
 <div id="divContainerEvents">
  <div id="divContentEvents">
    <p>Content</p>                    
  </div>
</div>

and beside this the same code for a second box for News…

 
<div id="divUpControlNews"> 
 <a href="javascript:;" onMouseOver="PerformScrollNews(-7)" onMouseOut="CeaseScrollNews()">
  <img src="images/arrow-up-news.gif" border="0"></a></div>
        
<div id="divDownControlNews"> 
<a href="javascript:;" onMouseOver="PerformScrollNews(7)" onMouseOut="CeaseScrollNews()">
  <img src="images/arrow-dwn-news.gif" border="0"></a></div>
        
  <div id="divContainerNews">
    <div id="divContentNews">
     <p>Content</p>                    
    </div>