Grow your CSS skills. Land your dream job.

IE 6 & 7 navigation bug.

  • # October 11, 2009 at 10:37 pm

    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!!

    # October 11, 2009 at 11:58 pm

    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

    # October 12, 2009 at 12:21 am

    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??

    # October 12, 2009 at 1:43 am

    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,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".