PDA

View Full Version : Scrollbar Overlaps DIV in Firefox But Not Safari



dejo
Aug 11, 2006, 10:05 PM
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 (http://67.177.206.154/~dejo/scrollbar_overlap.html)

And here's the HTML code for the page:
<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.


m_gerbik
Aug 22, 2006, 04:45 PM
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:

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:

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.
Butters
Aug 22, 2006, 05:44 PM
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)
m_gerbik
Aug 22, 2006, 09:10 PM
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)
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.