DHTML Menu in DIV is hiding other DIV

[warrenf]

Greetings,

I have been muddling my way through developing a DHTML menu. I finally have something workable. My problem now is that I have implemented my menus in a DIV that overlaps my 'master' DIV. The master DIV is visible when the menu's are not activated but once I mouse over one of my menus the master DIV gets obscured by the menu DIV. To boot this only happen on IE. Everything appears to render fine in FF and Opera.

I wonder where I might start looking. I have set all of my DIV and iframe backgrounds to transparent, in CSS.

I am happy to send code, but not sure which would be most meaningful, CSS, HTML or JS.

Thanks in advance,
Warren

[acoder]

Welcome to The Scripts.

I am not sure, but this this seems like a CSS transparency problem where your transparent div doesn't show as transparent thus obscuring the master div. If that is the case, you might be better off in the HTML/CSS forum. You should only need to post your HTML and CSS. If you can confirm that that is the case, I'll move this thread to that forum.

[warrenf]

Thanks for the Welcome.

I am quite probably as new to newbie as they come in DHTML. But it is my suspicion that this is a transparency issue. Here is my code below...
BODY:
[HTML]<div id="container">
<div id="bannerbar">
<iframe id="bannerframe" src="banner.htm" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div>
<div id="menubar">
<iframe id="menuframe" src="menu.htm" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div>
<div id="maincontent">
<iframe id="mainframe" src="home.htm" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<div id="notificationbar">
<iframe id="notificationframe" src="notification.htm" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div>
</div>
</div>[/HTML]

AND the css that styles it is:

html {
    margin:0;
    padding:0;
    height:100%;
}
 
body {
    margin:0;
    padding:0;
    text-align:center;
    height:100%;
    font-size:10px;
    font-family:Verdana;
    background-color:#E6E6FA;
    }
 
/* THE MAIN DIV */    
#container {
    position:relative;
    width:800px;
    margin:0 auto;
    height:100%;    
    background-color:#FFFFFF;
    }
 
/* THE BANNER DIV & IFRAME */
#bannerbar {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    width:100%;
    }
 
#bannerframe{
    height:60px;
    margin:0;
    padding-left:5px;
    padding-right:5px;
    padding-top:1px;
    text-align:center;
    width:100%;
    }
 
/* THE MENU DIV & IFRAME */
#menubar {
    position:absolute;
    top:61px;
    left:0px;
    width:100%;
    background-color:transparent;
    }
 
#menuframe{
    width:100%;
    margin:0;
    text-align:left;
    background-color:transparent;
    }
 
/* THE MAIN DIV & IFRAME */
#maincontent {
    position:absolute;
    top:61px;
    left:0px;
    z-index:99;
    width:100%;
    }
 
#mainframe{
    text-align:left;
    padding-left:5px;
    padding-right:5px;
    padding-top:1px;
    width:100%;
    font-size:14px;
    font-family:Verdana;
    }
 
/* THE NOTIFICATION DIV & IFRAME */
#notificationbar {
    padding:0;
    margin:0;
    }
 
#notificationframe{
    height:30px;
    margin:0;
    padding-left:0px;
    padding-right:0px;
    padding-top:0px;
    text-align:left;
    width:100%;
    }

Thanks in advance.