No replies
tatty27
tatty27's picture
Offline
newbie
Last seen: 9 years 3 days ago
Timezone: GMT+1
Joined: 2011-08-03
Posts: 2
Points: 4

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.

This is the site www.murooj-beauty.co.uk

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