First of all, thank you for taking the time to read my question ;)

The css navbar I created on my site looks great when I view it from Safari and Firefox on my iMac.

But it is missing some with borders on the right side of each

  • These are in place to give the look of being divided. *I am aware that in ie7 and 8 that I will not see rounded-corners

    On Windows XP, IE 7, 8 Safari and Firefox 3.5 the "navbar" is missing some of these borders?

    Please help.

    Thank you :)

  • 2 answers

    George 68
    2
    points

    There are a few things that you will need to change.

    Things to remove:

    display: inline; from #navbar li

    margin-left: -5.5px; from #navbar a

    Now add:

    float: left to #navbar li

    width: 600px; and margin: 0 auto; to #navbar <-- this will center the navbar on the page

    That should do it;

    #navbar li {
    float: left;
    }
    #navbar {
    width: 600px;
    margin: 0 auto;
    }
    

    One more thing. All pixel values must been in whole numbers. CSS/monitors do not render half pixels.

    Answered over 7 years ago by George
    • thank you for the help Justin U. over 7 years ago
    Anthony 25
    1
    point

    I made this modification:

    #navbar a {
         margin-left: -5px; \\changed from -5.5px
    }
    

    And it fixed it up. Not sure what it will look like on a Mac.

    If we assume that FF on Mac and PC are nearly identical, then I think the issue is with how the OS's interpret a pixel (I've heard something along those lines before).

    Answered over 7 years ago by Anthony
    • This would work but it is best to avoid negative margins to fix layout issues if they can be corrected in a standard manner. I have run into quite a few cross browser issues caused by layouts relying on negative margins. George over 7 years ago
    • thank you for the help Justin U. over 7 years ago