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

08-21-2009, 11:08 AM

hjalmar

Status: Senior Member
Join date: Nov 2004
Location: Sweden
Expertise:
Software:

Posts: 857

iTrader: 11 / 100%

hjalmar is an unknown quantity at this point

First of all i would cut down on all the repetetive(wow sp?

) code. there is no reason for you to declare the same code on all the decendant that should have the same rules.

But at a quick glance i noticed you use the display: table-cell; (why you want to use it in the first place is out of head, if it has any impact at all as it is) as none of the IE versions support that anyways so you can just remove it completly.

I'll suggest you make ul a block element(as it is per default) and the anchors block aswell and floated. remember that the anchors need to be floated as well to play nice with IE6.

I would also use an extra span inside the anchor and only use one image but's just me. (bit more markup vs more css vs flexibility all choices depending on taste)

If i get time later tonight i'll back up my post with some code.

cheers hjalmar.

08-21-2009, 04:26 PM

thekooliest

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

Posts: 48

iTrader: 0 / 0%

thekooliest is on a distinguished road

Thanks for the pointer for cleaning up the code, a lot of that was being sleepy last night. Float left on the a:hover did the trick...Thanks!

08-29-2009, 08:13 AM

rochow

Status: Member
Join date: Oct 2006
Location: Australia
Expertise:
Software:

Posts: 297

iTrader: 4 / 100%

rochow is on a distinguished road

Yes, the biggest problem I see in CSS is REPETITION.

#header img{border:none}

Why put that 20 times for every image in the page, when you can just add img {border:0} to start with? (Not picking on you in particular).

#content h1 {margin:0 20px}
#content p {margin:0 20px}
#content ul {margin:0 20px}

(I wish I was making this **** up, that's basically word for word off a site I saw, they had that for about 20 different elements). Why the hell not just put padding on #content? Duh. I insert a table, and it's 20px off the rest of it because margin wasn't just added to it all... that's just silly. Plus, it takes longer to code if you declare everything over+over again.

padding:11px;padding-left:20px

font:11pt Arial, Arial;

The amount of people that'd don't use "global declarations" is ridiculous. Just put the colour on body, the font on body, and simply change the size throughout. That way changing font means changing 1 thing, not having to find+replace because it was done 50 times. Same with link colours etc, instead of #content a {} why not just put it on a {}, then if you need a different than "normal" put #sidebar a {} etc. Same goes for h1, h2, ... you get the idea. Just common sense really (plus, quicker! easier!)