When I use overflow:hidden for div which is positioned absolute (for menu), other div overlaps. Here is the code. It works fine in FF3. Any help appreciated. Please note that html should be as it is. Also if you can provide solution, just by changing styles of menu div (the div which contains menu text) it is more helpful for me. Thanks in advance
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="position:relative">
<div>
<div style="height:20px;overflow:hidden">
<div style="position:absolute;width:200px;height:100px;top:0px;background-color:black;z-index:1">menu</div>
</div>
</div>
<div style="position:relative;height:200px;background-color:gray;"></div>
</div>
</body>
</html>
Apparently, FF2 has some known issues with
overflowandz-index. (See this google search)There's probably a workaround, but we'll have to know what you're trying to accomplish with
overflow: hidden. It's hard to tell from your code because it isn't really having an effect—removingoverflow:hiddenentirely gets the result you're going for.