Z-index issue

7 replies [Last post]

Wed, 2009-12-02 20:00

lokiloks

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>

Attachment	Size
pic.png	217.43 KB
backgrounds_r1_c1.jpg	553 bytes

Tags:

CSS Styling

Thu, 2009-12-03 00:35

lokiloks

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.

Thu, 2009-12-03 00:37

Deuce

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.

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

Wed, 2009-12-09 20:46

lokiloks

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.

Tue, 2009-12-15 16:18

PeterPan

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?!

Tue, 2009-12-15 16:18

PeterPan

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?!

Wed, 2009-12-16 17:19

lokiloks

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.

Fri, 2009-12-18 10:04

PeterPan

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.

bump

It's been 4 and a half hours.

Been quite a while longer

Why not just a apply a

Why not just a apply a

The image needs to be higher

Yea, ok...fair play. Have

User login

Navigation