# Button activated vertical text scroller not working in Firefox

**URL:** https://forum.kirupa.com/t/button-activated-vertical-text-scroller-not-working-in-firefox/256489
**Category:** Uncategorized
**Created:** [April 3, 2008, 3:05pm UTC](https://forum.kirupa.com/t/button-activated-vertical-text-scroller-not-working-in-firefox/256489 "2008-04-03T15:05:28Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![charles\_i](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/charles_i/32/2986_2.png) [@charles\_i](https://forum.kirupa.com/u/charles_i)
#### Post date: [April 3, 2008, 3:05pm UTC](https://forum.kirupa.com/t/button-activated-vertical-text-scroller-not-working-in-firefox/256489/1 "2008-04-03T15:05:28Z")

</div>

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.

```auto

#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…

```auto

<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…

```auto
 
<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>

```