Firefox DIV Layer Issues
Working on a project recently, I ran across what appears to be a DIV layering issue while testing a web application in Firefox (specifically version 1.5.0.7). The project required using a DIV as a kind of menu bar and in this particular case I had to use absolute positioning to position it. What I observed was that when the “menu bar” DIV was visible, that it was not possible to click anything on the page “below” the DIV.
I searched the internet and found people with the same issues, but found no solutions other than “avoid absolute positioning”… I tried a few things, but ultimately stumbled upon on the solution. Check out the examples below:
This is an example of the issue.
Oddly enough, this sample did not have the DIV layering issue. Meaning, that it only happens when you have a table inside of the DIV. Very Interesting.
The solution to the issue was as simple as specifying a height for the DIV!
This is certainly something to remember the next time you’re working with layering DIV’s.
~ Bobby
Working on a project recently, I ran across what appears to be a DIV layering issue while testing a web application in Firefox (specifically version 1.5.0.7). The project required using a DIV as a kind of menu bar and in this particular case I had to use absolute positioning to position it. What I observed was that when the “menu bar” DIV was visible, that it was not possible to click anything on the page “below” the DIV.
I searched the internet and found people with the same issues, but found no solutions other than “avoid absolute positioning”… I tried a few things, but ultimately stumbled upon on the solution. Check out the examples below:
This is an example of the issue.
<html>
<head>
<style type="text/css" media="all">
.absdiv
{
position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}
</style>
</head>
<body>
line 1
<br>line 2
<br>line 3
<div class="absdiv">
<table>
<tr><td>test</td></tr>
</table>
</div>
</body>
</html>
Oddly enough, this sample did not have the DIV layering issue. Meaning, that it only happens when you have a table inside of the DIV. Very Interesting.
<html>
<head>
<style type="text/css" media="all">
.absdiv
{
position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
}
</style>
</head>
<body>
line 1
<br>line 2
<br>line 3
<div class="absdiv">test</div>
</body>
</html>
The solution to the issue was as simple as specifying a height for the DIV!
<html>
<head>
<style type="text/css" media="all">
.absdiv
{
position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; height: 12 ;
}
</style>
</head>
<body>
line 1
<br>line 2
<br>line 3
<div class="absdiv">
<table>
<tr><td>test</td></tr>
</table>
</div>
</body>
</html>
This is certainly something to remember the next time you’re working with layering DIV’s.
~ Bobby
posted by Trep Step @ 6:12 PM
5 comments
