CSS Menu in IE7

Question

sass_js 0 Newbie Poster

16 Years Ago

Hi - I'm a CSS/HTML newbie so bear with me..

I'm using a CSS menu on my webpage {taken from CSS Menu Maker} and it works great in other browsers except IE7. The sub menu items get hidden behind the main menu. I've tried researching solutions but 1) have difficulty understanding some of the suggested fixes and 2) haven't found one that works for me.

Can someone please help?

Here is the CSS

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
	background-color:#534741;
}
.menu{
	left:200px;
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 63% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	text-align:center;
	text-decoration:none;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	zoom:1;
		}
		.menu li a:hover, .menu li:active, .menu ul li:hover, .menu ul li:active a{
			background: #7C0B0B bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:175px;
		z-index:100;
		}
	.menu li:hover ul, .menu li:active ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:175px;
		}
	.menu li:hover li, .menu li:active li a{
		background:none;
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:11px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul a:active, .menu li ul li:hover, .menu li ul li:active a{
			background:#7C0B0B center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

and the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../menu_057_04207/menu/menu_style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">
	<div id="head">
		<h1><img src="../new_headerv2.jpg" alt="IM Header" width="750" height="125" border="0" align="top" usemap="#myHome">
<map name="myHome" id="myHome"><area shape="rect" coords="18,17,248,110" href="../index.html" alt="In Mulieribus :: Home">
</map></h1>
	</div>
	<div id="spacer"></div>
	<div id="nav"> 
	<!--<style media="all" type="text/css">@import "/menu/menu_style.css";</style>-->
	<div class="menu">
<ul>
<li><a href="">About Us</a>
<ul>
<li><a href="../ensemble.html" target="_self">Ensemble</a></li>
<li><a href="../musicians.html" target="_self">Musicians</a></li>
</ul>
</li>
<li><a href="">Seasons</a>
<ul>
<li><a href="../season.html" target="_self">Current Season</a></li>
<li><a href="../pastSeasons.html" target="_self">Past Seasons</a></li>
</ul>
</li>
<li><a href="">Listen</a>
<ul>
<li><a href="../cds.html" target="_self">CDs</a></li>
<li><a href="../samples.html" target="_self">Samples</a></li>
</ul>
</li>
<li><a href="">Press</a>
<ul>
<li><a href="../reviews.html" target="_self">Reviews</a></li>
<li><a href="../mediakit.html" target="_self">Media Kit</a></li>
</ul>
</li>
<li><a href="">Support Us</a>
<ul>
<li><a href="../donate.html" target="_self">Donate</a></li>
</ul>
</li>
<li><a href="">Contact Us</a>
<ul>
<li><a href="../contact.html" target="_self">Contact Information</a></li>
<li><a href="../email.html" target="_self">Join Our Email List</a></li>
</ul>
</li>
</ul>
</div>
</div>

THANK YOU!

html-css web-design

3 Contributors
3 Replies
128 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by macgurl70

Dani AI

Generated 9 Months Ago

Brief expert note: IE7 frequently shows absolutely positioned submenus behind other page elements because of stacking-context, overflow, and the old "hasLayout" behavior. The suggestions already made by (hasLayout/zoom) and (doctype affects rendering mode) are on the right track. The most reliable fixes concentrate on the stacking context of the menu and on any positioned/overflowing ancestors such as #nav, #head, or #wrapper.

Quick troubleshooting checklist:

Inspect ancestors of the .menu for position + z-index or overflow: hidden; any of these can clip or bury child elements in IE7.
Toggling zoom:1 (hasLayout) will change IE7 behavior — removing it can help or break other fixes, so test both ways.
Prefer creating a positioned stacking context on the menu container itself so submenus can sit above siblings.

A compact CSS approach that often resolves the problem in IE7:

/* make the menu container sit above other positioned siblings */
.menu {
  position: relative;
  z-index: 9999;
}

/* anchor each top-level LI so its absolute submenu positions reliably */
.menu li {
  position: relative;
}

/* ensure the submenu is higher than other content */
.menu li ul {
  z-index: 10000;
}

Notes and cautions: setting a high z-index on the menu container is usually safer than only raising the submenu z-index, because z-index comparisons occur within the same stacking context. If overflow: hidden exists on any ancestor, change it to overflow: visible or move the submenu outside that container. If these changes do not fix the issue, the next step is to inspect the CSS for #nav/#wrapper/#head for positioning/z-index/overflow — those are the most common culprits in IE7.

All 3 Replies

scrappedcola 11 Posting Whiz in Training

16 Years Ago

In the definition for .menu li a, remove the zoom:1.

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	text-align:center;
	text-decoration:none;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sass_js 0 Newbie Poster · Answer 1 · 2010-08-14T23:43:19+00:00

Hi - Thanks so much for your suggestions. Unfortunately, it didn't solve the issue. Any other ideas?

Thanks.

macgurl70 9 Junior Poster · Answer 2 · 2010-08-15T14:12:40+00:00

Try using this in your code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

instead of this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

See if that helps a bit too.

Found that line at .

CSS Menu in IE7

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers