Codeworx Design Studio / Dev

Welcome to the Codeworx Design Studio Development Blog! A little place where the CX Development Dept. can post and express our thoughts!

Sunday, October 29, 2006

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.

<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:

Post a Comment

<< Home