IE6/7 Nav Menu Glitch - Webmaster Forum - Web Design, Programming and SEO forums

08-21-2009, 02:07 AM

thekooliest

Status: Junior Member
Join date: Jan 2009
Location:
Expertise:
Software:

Posts: 48

iTrader: 0 / 0%

thekooliest is on a distinguished road

IE6/7 Nav Menu Glitch

On my site in progress (CSS Design Blog) the hover over is messed up in Internet Explorer 6 and 7. I've tried a lot of things to try and fix it and nothing's done it. Please let me know what you can do to help.

HTML:

Code:

<body>
	<div id="header">
		<a href="http://answersforpilots.com/images/test/cssd">
			<img src="images/header_logo.gif" alt="CSS Design Blog" />
		</a>
		<ul class="nav">
			<li><a href="#" class="about">About</a></li>
			<li><a href="#" class="job_board">Job&nbsp;Board</a></li>
			<li><a href="#" class="directory">Directory</a></li>
			<li><a href="#" class="resources">Resources</a></li>
			<li><a href="#" class="contact">Contact</a></li>
		</ul>
	</div>
</body>

Main CSS:

Code:

body{margin:0;padding:0;background:#09274e url('../images/header_bg.gif') repeat-x top}
#header{background:url('../images/header.gif') no-repeat;height:87px;width:959px;margin:9px auto 0 auto;padding:11px;padding-left:20px}
#header img{border:none}
ul.nav{display:inline;list-style-type:none;width:550px;float:right;margin-right:-76px;margin-top:37px}
ul.nav li{display:table-cell;font:11pt Arial, Arial;color:#fff;padding-right:38px;letter-spacing:0px}
ul.nav a{color:#fff;text-decoration:none}
ul.nav li a.about:hover{font-weight:bold;background:url('../images/about_hover.gif') no-repeat;padding:6px 24px 6px 24px;margin-left:-26px;margin-right:-26px}
ul.nav li a.job_board:hover{font-weight:bold;background:url('../images/job_board_hover.gif') no-repeat;padding:6px 24px 6px 24px;margin-left:-26px;margin-right:-29px}
ul.nav li a.directory:hover{font-weight:bold;background:url('../images/directory_hover.gif') no-repeat;padding:6px 25px 6px 23px;margin-left:-26px;margin-right:-28px}
ul.nav li a.resources:hover{font-weight:bold;background:url('../images/resources_hover.gif') no-repeat;padding:6px 25px 6px 23px;margin-left:-26px;margin-right:-27px}
ul.nav li a.contact:hover{font-weight:bold;background:url('../images/contact_hover.gif') no-repeat;padding:6px 25px 6px 23px;margin-left:-26px;margin-right:-27px}

IE7 CSS:

Code:

ul.nav{margin-top:-52px}
ul.nav li{float:left}

IE6 CSS:

Code:

ul.nav{margin-top:-61px}
ul.nav li{float:left;margin-top:8px}

What it should look like:

What it does look like in IE6/7:

Thanks,
Sam