Horizontal menu problems in IE7

HTML & CSS
1

Hi,

I have a site where the menu lays horizontally across the top page of the page and it works great in everything except ie6 and ie7 (no surprises there) and I can’t workout for the life of me why. On ie6 and ie7 the menu looks like steps going down the page from left to right

I have added a css sheet for ie7 and ie6 but no amount of messing with the code will work. I know the css sheets are being seen correctly because all of the other adjustments I had to make for ie6 and 7 have been applied successfully

This is the site Murooj Hair and Beauty - Burton-on-Trent

The html is


<div id="navigation">
       <ul class="nav_bar">
                <li class="current"><a href="index.php">Home</a></li>
                <li><a href="contents.php">Contents</a></li>
                <li><a href="face.php">Face</a></li>
                <li><a href="body.php">Body</a></li>
                <li><a href="nails.php">Nails</a></li>
                <li><a href="eyes.php">Eyes</a></li>
                <li><a href="feet.php">Feet</a></li>
                <li><a href="hair.php">Hair</a></li>
                <li><a href="contact_us.php">Contact</a></li>
	</ul>
</div>

And here is the CSS


#navigation{
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(images/nav_bar.gif);
	background-repeat:repeat-x;
	width:685px;
	z-index:7;
}

.nav_bar{
	position:relative;
	padding: 0 0 0 0px;
	margin: 0 auto 0 auto;
	height:37px;
	list-style:none;
	width:100%;
}

.nav_bar li a{
	float:left;
	display:inline-block;
	text-decoration:none;
	font-family:sans-serif;
	font-size:0.81em;
	font-weight:bold;
	line-height:37px;
	text-align:center;
	cursor:pointer;
	width:76px;
	color:#000;
}

.nav_bar li.current a, .nav_bar li a:hover {
	background-image:url(images/nav_btn_jpg.jpg);
}

I have been trying to work this out for hours and it’s starting to drive me nuts!

Thanks

Tatty27

2

Try adding the width setting from the <a>s to the <li>s

.nav_bar li {width: 76px;
}

and instead of display: inline-block on the <a>s (which isn’t needed and doesn’t work in IE6/7) try display: block or just leave that line out altogether.

3

Perfect! Thank you so much!

Tatty27

4

Ha ha! Fluked it. :smiley: Glad that helped.