Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Scrollbar Overlaps DIV in Firefox But Not Safari

dejo

dejo

Moderator emeritus
Original poster
Sep 2, 2004
15,982
454
The Centennial State
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.
 
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.
 
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)
 
Butters said:
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)
Click to expand...
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back