I need help with a css or javascript solution to make the menu below appear under the #pic image when not hovered, then over the #pic image when hovered. Firefox renders fine, IE not so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> /**************************GENERAL STYLING***************************/ body {font-size: 11px; font-family:"Arial Unicode MS", Verdana, Arial, Helvetica, sans-serif;} a:link {color: #052C89;} a:visited {color: #0A4E85;} a:hover {text-decoration: none;} .clearer {clear: both; display: block; height: 1px; margin-bottom: -1px; font-size: 1px; line-height: 1px;} .hidden {position: absolute; left: -9999em;} /**************************LAYOUT ELEMENTS***************************/ * {margin: 0; padding: 0;} html {height: 100%;} body {height: 100%; background: #AEE2E8 url(backgrounds_r1_c1.jpg) 50% 8px repeat-x; text-align: center;} #page {width: 960px; margin: 0 auto; min-height: 100%; text-align: left;} #topper {height:371px; width:960px; background-color:gray;} #menuholder {position:absolute; top:13px; right:0; width:660px; height:104px;} #content {padding-bottom: 150px;} #contentMain {display: inline; clear: both; float: left; margin-top: 0;} #nonFooter {position: relative; min-height: 100%; padding-bottom:8px} #footer {position: relative; margin: -50px auto 0 auto;} /* IE CSS hacks */ * html #page {height: 100%;} * html #nonFooter {height: 100%; width: 960px;} /*******************************MENU*********************************/ #menu a {color:#444; font-weight:bold; font-size:16px;} #menu li dd a {font-weight:normal; font-size:14px;} #menu {list-style-type:none; margin:0; padding:0;} #menu li {float:left; padding:0; margin:0; position:relative; width:165px; height:103px;} #menu li dd { height:auto; z-index:200;} #menu li dl {position:absolute; top:0; left:0;padding-top:44px; z-index:200;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li:hover, #menu li a:hover {border:0; z-index:200;} #menu li:hover dd, #menu li a:hover dd {display:block; margin:0; z-index:200;} #menu li:hover dl, #menu li a:hover dl {background-color:white; border:solid 1px #7EC7D5; padding-top:43px; margin-left:-1px; z-index:200;} #menu li:hover dl a, #menu li a:hover dl a {color:#000; z-index:200;} #menu li:hover dl dd a, #menu li a:hover dl dd a {color:#444; display:block; margin:0; padding:9px 8px ; z-index:200;} #menu li:hover dl dd.last a, #menu li a:hover dl dd.last a {color:#444; display:block; margin:0; padding:9px 8px ; z-index:200;} #menu li:hover dl dd a:hover, #menu li a:hover dl dd a:hover {color:#000; background-color:#F3FAFB; padding:8px; border:solid 1px #7EC7D5; border-width:1px 0; z-index:200;} #menu li:hover dl dd.last a:hover, #menu li a:hover dl dd.last a:hover {color:#000; background-color:#F3FAFB; border:solid 1px #7EC7D5; border-width:1px 0 0 0; padding:8px 8px 9px 8px; z-index:200;} #menu table {border-collapse:collapse; padding:0; margin:0;} #menu dl {width: 165px; margin: 0; padding: 0; background: none ; text-align:center; cursor:pointer;} #menu dt {margin:0; padding: 0 0 1px 0; color: #333;} #menu .one {background: none;} #menu .two {background: none;} #menu .three {background: none ;} #menu .four {background: none;} #menu li {margin:0; padding:0; color: #333; background: none ; text-align:center;} #menu .three {background-color:#AEE2E8; border:solid 1px #7EC7D5; width:163px; height:101px;} #menu li.three:hover dl, #menu li.three a:hover dl {padding-top:44px;margin-left:0px;} #menu .three:hover {width:165px;} /******************************HEADER********************************/ #header {height: 127px;} /******************************TOPPER********************************/ #topper p {font-size: 14px; margin: 15px 0 15px 32px; width: 565px;} #ppic {top:0; left:0; width:960px; height:365px; margin-bottom:-365px; text-align:right; position:relative; z-index:150;} #pic {position:absolute; bottom:0; right:0; z-index:150; behavior: url(iepngfix.htc)} /*\*/ * html #topper h1{ margin-bottom:-13px;} /* CONTENT */ #content { padding-bottom:50px; color:#333} /* FOOTER */ #footer {width: 100%; color: #000; text-align: center; height:50px; line-height:50px;} #bottomLinks {list-style: none; margin-top: 0px; margin-left: 0; height:50px; line-height:50px; font-size:12px;} #bottomLinks li {display: inline; border-left: 2px solid #666; padding: 0px 13px 0px 15px;} #bottomLinks li.first {border-left: 0 none transparent;} #bottomLinks a {color: #333;} #bottomLinks a:hover {color:#000;} /* SUBCONTENT */ #contentSub {display: inline; float: right; width: 220px; margin-right: 25px;} /***********************************************************************************************/ /* MAIN */ #substance { margin-top:-4px; } /*\*/ * html #substance{ margin-top:-12px;} #substance h2 { font-size: 24px; padding-bottom:20px; text-align:center; } #substance h3 { font-size: 14px; padding-bottom:10px;} #substance p { line-height: 210%; margin-bottom: 2em; color:#333;} </style> <!--[if lte IE 7]> <style type="text/css"> #menuholder ul {display:inline;} .bm { border-bottom:none transparent 0; } </style> <![endif]--> </head> <body> <div id="page"> <div id="nonFooter"> <div id="header"> <p id="logo"><a href="#">Logo</a></p> <div id="menuholder"> <ul id="menu"> <li class="one"> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt><a href="#">Menu 1</a></dt> <dd><a href="#" title="Menu 1.1">Menu 1.1</a></dd> <dd><a href="#" title="Menu 1.2">Menu 1.2</a></dd> <dd><a href="#" title="Menu 1.3">Menu 1.3</a></dd> <dd><a href="#" title="Menu 1.4">Menu 1.4</a></dd> <dd><a href="#" title="Menu 1.5">Menu 1.5</a></dd> <dd><a href="#" title="Menu 1.6">Menu 1.6</a></dd> <dd><a href="#" title="Menu 1.7">Menu 1.7</a></dd> <dd><a href="#" title="Menu 1.8">Menu 1.8</a></dd> <dd class="last"><a href="#" title="Menu 1.9">Menu 1.9</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="two"> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt><a href="#">Menu 2</a></dt> <dd><a href="#" title="Menu 2.1">Menu 2.1</a></dd> <dd><a href="#" title="Menu 2.2">Menu 2.2</a></dd> <dd><a href="#" title="Menu 2.3">Menu 2.3</a></dd> <dd><a href="#" title="Menu 2.4">Menu 2.4</a></dd> <dd><a href="#" title="Menu 2.5">Menu 2.5</a></dd> <dd><a href="#" title="Menu 2.6">Menu 2.6</a></dd> <dd class="last"><a href="#" title="Menu 2.7">Menu 2.7</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="three"> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt><a href="#">Menu 3</a></dt> <dd><a href="#" title="Menu 3.1">Menu 3.1</a></dd> <dd><a href="#" title="Menu 3.2">Menu 3.2</a></dd> <dd><a href="#" title="Menu 3.3">Menu 3.3</a></dd> <dd><a href="#" title="Menu 3.4">Menu 3.4</a></dd> <dd class="last"><a href="#" title="Menu 3.5">Menu 3.5</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="four"> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl> <dt><a href="#">Menu 4</a></dt> <dd><a href="#" title="Menu 4.1">Menu 4.1</a></dd> <dd><a href="#" title="Menu 4.2">Menu 4.2</a></dd> <dd><a href="#" title="Menu 4.3">Menu 4.3</a></dd> <dd><a href="#" title="Menu 4.4">Menu 4.4</a></dd> <dd><a href="#" title="Menu 4.5">Menu 4.5</a></dd> <dd><a href="#" title="Menu 4.6">Menu 4.6</a></dd> <dd class="last"><a href="#" title="Menu 4.7">Menu 4.7</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <div id="content"> <div id="contentMain"> <div id="topper"> <div id="ppic"><img id="pic" src="pic.png" width="464" height="407" alt="pic"/></div> <h1 class="leading">Heading 1 - Topper</h1> <p>Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. </p> <p>Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. Topper body text goes here. </p> </div> <div id="substance"> <div class="hole_dkblue"> <div class="tl"></div> <div class="tm"></div> <div class="tr"></div> <div class="mid"> <div class="boxtext"> <h2>Secondary Head 2 </h2> <h3>Secondary Head 3 </h3> <p>Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. Secondary Body goes here. </p> <p><a href="#">Read More</a></p> </div> </div> <div class="bl"></div> <div class="bm"></div> <div class="br"></div> </div> </div> </div> <div class="clearer"></div> </div> </div><!-- END nonFooter --> </div><!-- END page --> <div id="footer"> <ul id="bottomLinks"> <li class="first">Company © 2009</li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Home</a></li> <li><a href="#">xxxx</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Site Map</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- END footer --> </body> </html>
Attachment | Size |
---|---|
pic.png | 217.43 KB |
backgrounds_r1_c1.jpg | 553 bytes |
bump
Anyone got help for me here? Please?
I've gotten a workaround to work by changing the z-index for the menuholder with javascript onmouseover and onmouseout but it isn't what I'm really shooting for. I need to be able to set the z-index for the li's in the code, but IE won't seem to recognize it.
It's been 4 and a half hours.
It's been 4 and a half hours.
Been quite a while longer
Been quite a while longer since then now.
Why not just a apply a
Why not just a apply a z-index to the #menuholder?
Well, that fixed it for me atleast?!
Why not just a apply a
Why not just a apply a z-index to the #menuholder?
Well, that fixed it for me atleast?!
The image needs to be higher
The image needs to be higher than the menu when not hovered, and lower than the menu LI when it's hovered. A high Z-index on the #menuholder causes the whole menu to be over the image.
Yea, ok...fair play. Have
Yea, ok...fair play. Have you got an example of any other site that does this?
...oh oh....I have a thought right, that I think may be worth a try....try increasing the parent div's z-index on hover only!
so:
#menuholder:hover { z-index:9999; }
Give that a try.