By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,640 Members | 1,137 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,640 IT Pros & Developers. It's quick & easy.

DHTML Menu in DIV is hiding other DIV

P: 2
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
Feb 5 '07 #1
Share this Question
Share on Google+
2 Replies

acoder
Expert Mod 15k+
P: 16,027
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.
Feb 5 '07 #2

P: 2
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:
Expand|Select|Wrap|Line Numbers
  1. html {
  2.     margin:0;
  3.     padding:0;
  4.     height:100%;
  5. }
  6.  
  7. body {
  8.     margin:0;
  9.     padding:0;
  10.     text-align:center;
  11.     height:100%;
  12.     font-size:10px;
  13.     font-family:Verdana;
  14.     background-color:#E6E6FA;
  15.     }
  16.  
  17. /* THE MAIN DIV */    
  18. #container {
  19.     position:relative;
  20.     width:800px;
  21.     margin:0 auto;
  22.     height:100%;    
  23.     background-color:#FFFFFF;
  24.     }
  25.  
  26. /* THE BANNER DIV & IFRAME */
  27. #bannerbar {
  28.     position:absolute;
  29.     top:0px;
  30.     left:0px;
  31.     z-index:1;
  32.     width:100%;
  33.     }
  34.  
  35. #bannerframe{
  36.     height:60px;
  37.     margin:0;
  38.     padding-left:5px;
  39.     padding-right:5px;
  40.     padding-top:1px;
  41.     text-align:center;
  42.     width:100%;
  43.     }
  44.  
  45. /* THE MENU DIV & IFRAME */
  46. #menubar {
  47.     position:absolute;
  48.     top:61px;
  49.     left:0px;
  50.     width:100%;
  51.     background-color:transparent;
  52.     }
  53.  
  54. #menuframe{
  55.     width:100%;
  56.     margin:0;
  57.     text-align:left;
  58.     background-color:transparent;
  59.     }
  60.  
  61. /* THE MAIN DIV & IFRAME */
  62. #maincontent {
  63.     position:absolute;
  64.     top:61px;
  65.     left:0px;
  66.     z-index:99;
  67.     width:100%;
  68.     }
  69.  
  70. #mainframe{
  71.     text-align:left;
  72.     padding-left:5px;
  73.     padding-right:5px;
  74.     padding-top:1px;
  75.     width:100%;
  76.     font-size:14px;
  77.     font-family:Verdana;
  78.     }
  79.  
  80. /* THE NOTIFICATION DIV & IFRAME */
  81. #notificationbar {
  82.     padding:0;
  83.     margin:0;
  84.     }
  85.  
  86. #notificationframe{
  87.     height:30px;
  88.     margin:0;
  89.     padding-left:0px;
  90.     padding-right:0px;
  91.     padding-top:0px;
  92.     text-align:left;
  93.     width:100%;
  94.     }
Thanks in advance.
Feb 5 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.