Long javascript question

Factual Questions
1

Hey all. I’m working on a project, and am having a hard time figuring out an issue.

Basically, I’ve got some code that enables me to have a scrolling block of text embedded in the middle of my page, that scrolls on a mouseover of a buton.

It works fine, except when I add a particular <div> elsewhere in the page, at which point, in Firefox, the buttons stop functioning (though they still work in IE7).

First, a summary of the <div> structure of the page, along with javascript:



<body>
<div id="master">
    <div id="contactinfo"></div>  // THIS IS THE OFFENDING DIV
    <div id="header"></div>
    <div id="header_menu"></div>
    <div id="main">
    <script type="text/javascript">
        iens6=document.all||document.getElementById
        ns4=document.layers
        
        //Handles Internet Explorer 5.5-6 -- doesn't use .PNG for border
        version=0
        if (navigator.appVersion.indexOf("MSIE")!=-1){
          temp=navigator.appVersion.split("MSIE")
          version=parseFloat(temp[1])
        }

        if (version>=5.5 && version<7.0) //NON IE browser will return 0
        {
          //specify speed of scroll (greater=faster)
          var speed=2
          if (iens6){
            document.write('<div id="container" style="position:relative;top:40px;left:30px;width:445px;height:289px;z-index:-2;border:2px solid #CCC;overflow:hidden">')
            document.write('<div id="content" style="position:absolute;width:440px;height:289px;left:0;top:0;padding-top:13px;z-index:-10">')
          }
        } else {
          //specify speed of scroll (greater=faster)
          var speed=2
          if (iens6){
            document.write('<div id="container" style="position:relative;top:40px;left:30px;width:445px;height:289px;z-index:0-2;border:none;overflow:hidden"><img src="images/main_border.png">')
            document.write('<div id="content" style="position:absolute;width:440px;height:989px;left:0;top:0;padding-top:13px;z-index:-10">')
          }
        }
    </script>

        <ilayer name="nscontainer">
        <layer name="nscontent">
            <!-- SCROLLABLE CONTENT GOES HERE -->
        </layer>
        </ilayer>

    <script language="JavaScript1.2">
        if (iens6)
        document.write('</div></div>')
    </script>

        <div id="buttons">
            <a href="#" onMouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img src="uparrow.jpg"></a>
            <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="downarrow.jpg"></a>
        </div>

        <script language="JavaScript1.2">
          if (iens6){
            var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
          } else if (ns4){
            var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
          }

          function movedown(){
            if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
              crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
            else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
              crossobj.top-=speed
              movedownvar=setTimeout("movedown()",20)
          }

          function moveup(){
            if (iens6&&parseInt(crossobj.style.top)<=0)
              crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
            else if (ns4&&crossobj.top<=0)
              crossobj.top+=speed
              moveupvar=setTimeout("moveup()",20)

          }

          function getcontent_height(){
            if (iens6)
              contentheight=crossobj.offsetHeight
            else if (ns4)
              document.nscontainer.document.nscontent.visibility="show"
          }
          window.onload=getcontent_height
        </script>

As you can (hopefully) see, there’s a bunch of javascript that does the following:

[list]
[li]Identifies the browser; if it’s IE 5.5/6, it draws two <div>s to hold the scrolling content, using div borders; if it’s not those browsers, it draws the same <div>s but uses a PNG image for the border[/li][li]Grabs the <div> id’d as “content” (or the layer “nscontent”), gets the height of said container (window.onload), and uses it in the functions used to scroll the text up and down.[/li]
It worked fine, until I added the <div> with the red comment.

I’m really not sure at all what the div is doing to disrupt the code; it’s set pretty much out of the flow of everything else.

If I move the <div> above the <div id=“master”> div, it works as well, but gives me another whole mess of formatting problems.

I’m expecting this to sink like a rock, but if anyone who codes has a bout of insomnia tonight and feels like tackling this, it’d be much appreciated.

Oh, the page I’m working on can be found here.

2

Your contactinfo div has a z-index of 100, putting it (including, apparently, its 547px top margin) in front of the other elements on the page, so the mouseover events don’t reach the buttons.

3

Thanks! My brain had hit a problem-solving wall, and at least some of my div-based layouts end up being quite a bit of trial-and-error.