IE 6 & 7 navigation bug.

[joemalleck]

Hello,

I was wondering if anyone had any ideas on how to fix a little problem in IE 6 & 7 with the navbar on a site I’m working on . The navigation is being ‘pushed’ over to line up with the left side of the wrong div. It should be all the way across. I used absolute positioning to bring it down 10px, should I try and use negative margins or something??

here’s the css for the relative div and the navigation:

Code:

#masthead{
background:transparent url(img/masthead.png);
height:319px;
position:relative;

}
#more{
position:absolute;
top:230px;
left:110px;
}
.more_button{
display:block;
width:140px;
height:50px;
text-indent:-9999px;
}

.more_button a{
display:block;
width:100%;
height:100%;
background:transparent url(img/learn-more-button.png) no-repeat top left;
outline:none;
}

.more_button a:hover {
background-position:0 -50px;
}

.more_button a:active {
background-position:0 -100px;
}

#adverts{
margin-left:326px;
width:635px;
height:301px;
}
#main_nav{
width:976px;
height:40px;
display:block;
position:absolute;
top:10px;
background-color:#4b9ec7;
}

I’ve ran it through the validator and everything is fine except alt tags which don’t matter at this point because the images being used will not be used in the final site, it also had a problem with the YouTube video.

URL: http://acachurch.com/test

Any ideas??

Thanks!!

[luciano991]

Hi,

You were having the same problem in Firefox as well.

Try this for #main_nav:

#main_nav {
background-color:#4B9EC7;
height:40px;
margin:0 auto;
padding:10px 0;
width:945px;
}

You’ve still got some other funky things going on in the masthead div, but that’s all I can figure out for now.

All the best,

Luciano

[joemalleck]

Hmmm…

That didn’t work too well. Thanks though!

It looks fine in firefox, safari, Opera, and IE 8. I checked it out on browsershots.org and on a couple different computers.

Maybe I didn’t explain the problem well enough.

This in NOT what it should look like ( off to the right):
[img]http://api.browsershots.org/png/original/4b/4b20132ea97644170a6c5ff67007ec86.png[/img]

This is what it should look like centered overlaping:
[img]http://api.browsershots.org/png/original/da/da959948256f7b2ee8e973156b10b1d5.png[/img]

Any ideas??

[AshtonSanders]

The second image is the way it looks to me.

Have you refreshed IE 6 and 7?

The only problem I see is the clear gif problem in IE6.

Enjoy,

[Author]

Posts