7 replies [Last post]
lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 39 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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 &copy; 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>

AttachmentSize
pic.png217.43 KB
backgrounds_r1_c1.jpg553 bytes
lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 39 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

It's been 4 and a half hours.

It's been 4 and a half hours.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 39 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Been quite a while longer

Been quite a while longer since then now.

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 11 years 6 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

Why not just a apply a

Why not just a apply a z-index to the #menuholder?
Well, that fixed it for me atleast?!

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 11 years 6 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

Why not just a apply a

Why not just a apply a z-index to the #menuholder?
Well, that fixed it for me atleast?!

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 39 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

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.

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 11 years 6 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

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.