views:

83

answers:

1

Hi, 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"&gt;
<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> 
A: 

Apparently, FF2 has some known issues with overflow and z-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—removing overflow:hidden entirely gets the result you're going for.

matthew
Thanks Matthew.Yes, the code I provided here is just a sample of original application where we are facing problem with using overflow (Even in original application the html structure is almost same). As application is in production and the code was developed by some one else, I dont have much option left except changing css for menu div. Changing any other css or html would need deep regression testing which we are not afford to do as of now.
Shankar
I understand. I guess what I was wondering was what the overflow is meant to accomplish. If it's not masking anything, you could just set overflow:visible on it and avoid the problem.
matthew
Thanks a lot Matthew, I will set it as overflow:visible for now and check if it does not create any problem in any other areas.
Shankar
Cool. If it works out, can you mark this as the answer?
matthew