Grow your CSS skills. Land your dream job.

Please help with menu in IE

  • # November 28, 2008 at 10:45 pm

    Hi Guys and Gals. I hope that one of you may be able to help me out. I have tried everything to fix a menu that I’m currently working on. The menu looks as it should in Firefox and Safari on both the mac and PC, but in IE the menu floats off of the baseline. I’m kind of at a loss as to how to correct this issue. You can access the page at the following address http://markdodgson.com/testSites/oacfp/ . Below is my navigation CSS. Thanks for any light you can shed on this.

    Nav CSS

    * {
    padding: 0;
    }

    *:-moz-any-link:focus {
    -moz-outline-style: none ! important;
    }

    #navigation {
    height: 60px;
    width: 100%;
    border-top-width: 3px;
    border-bottom-width: 3px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #FFFFFF;
    border-bottom-color: #4A984B;
    background-image: url(../images/navBG.jpg);
    background-repeat: repeat-x;
    position: relative;
    }

    ul#menu{
    list-style:none;
    margin-left: 20px;
    }

    ul#menu li{
    display: inline;
    }

    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 40px;
    float: left;
    position: relative;
    margin-right: 9px;
    top: 7px;
    }

    ul#menu li a.home {
    background: url(../images/_nav/homeMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.about {
    background: url(../images/_nav/aboutMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.products {
    background: url(../images/_nav/productsMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.calendar {
    background: url(../images/_nav/calendarMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.membership {
    background: url(../images/_nav/membershipMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.contact {
    background: url(../images/_nav/contactMenu.jpg) no-repeat bottom center;
    width: 145px;
    }

    ul#menu li a.home:hover,
    ul#menu li a.about:hover,
    ul#menu li a.products:hover,
    ul#menu li a.calendar:hover,
    ul#menu li a.membership:hover,
    ul#menu li a.contact:hover {
    background-position: top center;
    }

    body#home ul#menu li a.home,
    body#about ul#menu li a.about,
    body#products ul#menu li a.products,
    body#calendar ul#menu li a.calendar,
    body#membership ul#menu li a.membership,
    body#contact ul#menu li a.contact {
    height: 55px;
    position: relative;
    top: -5px;
    background-position: center top;
    }

    Rob
    # November 29, 2008 at 5:38 am

    Hi dude,

    Firstly is there a reason why you have

    Code:
    body { overflow:scroll;}

    Causes some nasty floating scroll bars in IE7 if you maximise the window.

    For your navigation issues I think you have overcomplicated things, and the more divs and things like that you have floating round the worse it is… I have had a little wrestle with it and I think I would have to recode it to get it working in both browsers.

    Some things I would recomend though…

    the nice background stripe you have running through your site, you have tried to replicate it with borders and a BG image on the #navigationInside div – you dont need to do this as its already running behind in the wrapper. If you delete the border and bg image properties from this nav div you will see. I would go futher and say you could make the BG strip run across the site by styling the body element, then you could just forget about it, and use transpaernt block items over it.

    For your Nav bar itself – I would delete your #navigationInside div and use style the ul#menu to do whatever you need it to. Remeber that anything you can do with a DIV you can do with the UL selector, because they are both classed as block elements. So you can just delete your navigationinside div and take any important stylings across to your ul#menu definitions.

    I would strip it down and start again, making it more simplistic as I think troubleshooting something like that could actually be more time than re-writing it to be more efficient. I could probably have a go at putting something together for you, so you could see a different way of styling it.

    – Rob

    # November 29, 2008 at 8:06 am

    Hi Rob, I can’t thank you enough for taking the time to look over the site that I’m working on. I will take your advice and give your suggestions a try. As for the {overflow: scroll} … I added that so that the page doesn’t jump when there is more content on one page than the other. I didn’t realize that this causes issues. Again…Thanks.

    Rob
    # November 29, 2008 at 10:09 am

    hehe no probs dude – 2 heads are better than one eh :)

    OK SOOO – I have tried to keep your CSS as recgonisable as possible, and I have marked up what I have changed in comments so you can see. There are quite a few little bits but I hope it makes sense… you can see the results here:

    http://www.svgonline.co.uk/oacfp/index.html

    if you need the files…

    http://www.svgonline.co.uk/oacfp/files.zip

    I hope that helps and that my comments make sense… I’m sure there are better ways to do it than I have done it, but it works in IE and I suppose thats the main thing :)

    # November 29, 2008 at 1:46 pm

    Hey Rob, I don’t even know how to thank you. I’ll be sure to pay it forward to others on the forum. Thanks again for all of your help. This forum is truly unbelievable.

    Take Care
    Mark

    Rob
    # November 29, 2008 at 2:22 pm

    hehe no probs :)

    Glad I could be of help :)

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

You must be logged in to reply to this topic.

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