Scrollbar Overlaps DIV in Firefox But Not Safari

Discussion in 'Web Design and Development' started by dejo, Aug 11, 2006.

  1. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #1
    I am using a <select> and a <div> that is positioned absolutely to float over top of the <select>. In Safari, this <div> overlaps the <select> and its scrollbar fine. But in Firefox, the scrollbar (but not the rest of the <select>) overlaps the <div>. Is there any way to avoid this or is this just a Firefox bug?

    Link to the page in question: Scrollbar Overlap Example

    And here's the HTML code for the page:
    Code:
    <html>
    <head>
    <style type="text/css">
    #overlay_box {
    	position:absolute;
    	top:10px;
    	left:50px;
    	border:1px solid black;
    	background-color:yellow;
    	z-index:1000; 
    }
    </style>
    </head>
    <body>
    <select size="5">
    	<option>Choice 1</option>
    	<option>Choice 2</option>
    	<option>Choice 3</option>
    	<option>Choice 4</option>
    	<option>Choice 5</option>
    	<option>Choice 6</option>
    	<option>Choice 7</option>
    	<option>Choice 8</option>
    	<option>Choice 9</option>
    </select>
    <div id="overlay_box">OVERLAY</div>
    </body>
    </html>
    As you can tell, I've tried upping the z-index on the <div> but to no avail.
     
  2. m_gerbik macrumors member

    Joined:
    May 27, 2003
    Location:
    The Big Scrapple
    #2
    I had this same problem when I made a DIV overlay the entire window for an image-view pop-up. I had one textarea with scrollbars and they were coming right up to the top. Tried changing the z-index for the textarea, but no joy.

    The way I worked around it was this... When I ran the JS function to show the preview DIV that overlayed the Textarea I included this code:
    Code:
    var tas = document.getElementsByTagName('textarea');
    for (var i=0; i < tas.length; i++) {
    	tas[i].style.overflow = "hidden";
    }
    
    And in the function that hides the overlay DIV:
    Code:
    var tas = document.getElementsByTagName('textarea');
    for (var i=0; i < tas.length; i++) {
    	tas[i].style.overflow = "auto";
    }
    
    I know it doesn't match your problem exactly since I needed to completely remove scrollbars on the whole window temporarily, but maybe it'll help in the future.
     
  3. Butters macrumors 6502

    Joined:
    Jan 7, 2006
    Location:
    UK
    #3
    Is it just me or does that overlay example provided mess up quite a bit when you try to scroll the <select> box? (edit: in safari)
     
  4. m_gerbik macrumors member

    Joined:
    May 27, 2003
    Location:
    The Big Scrapple
    #4
    It's not you. Safari tries to put the viewable area in focus, but it doesn't seem to know what to do about the DIV above it. It redraws when you remove focus. Quirky.
     

Share This Page