IE7 CSS Menu Issues

HTML & CSS
1

Hey Everyone, I can’t seem to figure this out. I have a CSS menu that works fine across all browsers except IE7 (what else is new). If you roll over the “Cheese” and “meat” links a dropdown list appears. It should drop down right below the parent link, but in IE7 it displays to the right of the parent link. Can someone please let me know what the issue is? I have tried display:block, display:inline-block etc and nothing seems to help.

Here is the link:
http://k-elementsdesign.com/menu.html

Thanks!!

2

HIi,

You don’t have any co-ordinates for the dropdown menu so IE puts it where it thinks the menu happens to be.

Add this:


#menu li{position:relative;}/* stacking context */
#menu li ul{left:0;top:1.8em}/* adjust to suit*/

You will probably need to give height to the top menu so that you can position the dropdown exactly.

e.g. something roughly like this:


<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
/* menu styles */
#menu,#menu ul{
	margin: 0;
	padding: 0;
	list-style:none;
}
#menu {
	height:24px;
	line-height:24px;
	background:#666;
	font: 12px Tahoma, Arial
}
#menu li {
	float: left;
	height:24px;
	line-height:24px;
	position:relative;
}
#menu li a {
	background: #666666;
	text-decoration: none;
	border-right: 1px solid white;
	/*width: 70px;*/
 color: #fff;
	white-space: nowrap;
	height:24px;
	padding:0 8px;
	float:left;
}
#menu li ul li a {
	display: block;
	background: #666666;
	padding: 5px 5px;
	line-height:normal;
	text-decoration: none;
	color: #FFFFFF;
	white-space: nowrap;
	height:auto;
	float:none;
}
/* /End */

#menu li a:hover { background: #000000 }
#menu li ul {
	position: absolute;
	z-index :5;
	visibility: hidden;
	left:0;
	top:24px;
	border-top: 1px solid white;
	width:100%;
}
#menu li ul li {
	line-height:normal;
	height:auto;
	float:none;
	zoom:1.0;
}
#menu li ul li a {
	width: auto;
	float:none;
	display:block;
	background: #666666;
	color: #FFFFFF;
	zoom:1.0;
}
.listyleSmall {
	width:70px;
	text-align:center;
	font-size: 14px;
}
.listyleLarge {
	width:auto;
	text-align:center;
	font-size: 14px;
}
</style>
</head>

<body>
<script type="text/javascript">
var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;

function menu_open()
{   menu_canceltimer();
    menu_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function menu_close()
{   if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function menu_timer()
{   closetimer = window.setTimeout(menu_close, timeout);}

function menu_canceltimer()
{   if(closetimer)
    {   window.clearTimeout(closetimer);
        closetimer = null;}}

$(document).ready(function()
{   $('#menu > li').bind('mouseover', menu_open);
    $('#menu > li').bind('mouseout',  menu_timer);});

document.onclick = menu_close;
</script>
<ul id="menu">
		<li style="margin-left:10px;"> <a href="#" class="listyleSmall">Home</a> </li>
		<li style="margin-left:0px;white-space:nowrap;"> <a href="#" class="listyleLarge">Class Registration</a> </li>
		<li style="margin-left:0px;display:"> <a href="#" class="listyleLarge">Cheese</a>
				<ul>
						<li><a href="Cheddar">Cheddar</a></li>
						<li><a href="Blue">Blue</a></li>
						<li><a href="Swiss">Swiss</a></li>
						<li><a href="Havartti">Havartti</a></li>
				</ul>
		</li>
		<li style="margin-left:0px;display:"> <a href="#" class="listyleSmall">Meat</a>
				<ul>
						<li><a href="Ham">Ham</a></li>
						<li><a href="Bacon">Bacon</a></li>
						<li><a href="Beef">Beef</a></li>
						<li><a href="Sausage">Sausage</a></li>
				</ul>
		</li>
		<li style="margin-left:0px;display:"> <a href="#" class="listyleLarge">Animals</a>
				<ul>
						<li><a href="Cats">Cats</a></li>
						<li><a href="Dogs">Dogs</a></li>
				</ul>
		</li>
		<li style="margin-left:6px;">
				<c:SiteSearch id="searchComp"/>
		</li>
</ul>
</body>
</html>

Lose the table around the menu as its not needed at all and shouldn’t be used for layout anyway. Alos lose the inline styling and add classes instead where needed.

You also have some corrupt and invalid css here so validate regularly to catch these typos and mistakes:


#menu li ul li a:hover {  background: {
!pageColor
}
;
}

Actually I guess that’s from your cms so make sure its correct and shouldn’t be displayed in a live css file.

Hope that helps:)

3

Hi Paul O’B,

Thanks for the great suggestions.

I checked out the results of your code and the padding between each link should be equal distance between the link text and the border-right regardless of how many characters are in the link. Right now you can see that home and a meat links have more padding between the borders when they should be the same as the other links. How do I fix this?

Thanks again!!

4

That would be because you have given the two smaller links a different class and set a width for them here.


.listyleSmall {
	width:70px;
	text-align:center;
	font-size: 14px;
}

If you don’t want a width then don’t apply it :slight_smile:

5

Duh!! Didn’t even catch that. Thanks!!