Horizontal navbar formatting incorrectly in IE7 and Safari

dartanian

I have a fluid horizontal navbar on my website which is formatted using floats and percentage widths to make it fluid. This looks great in WinXP Firefox, Opera, and even IE6. Safari and IE7 render it incorrectly. I've tried playing with the ul, li, a css but can't get this to look right in the latter 2 browsers. The site is sinaiem.org . Any insight would be much appreciated.

Thanks.

Relevant css:

Expand|Select|Wrap|Line Numbers

 
#navbar {    /* horizontal navbar on top inside container */

    float: left;

    background-color: transparent;

    margin-left: 12%;

    padding: 1.5em 0%;

    }    

    #navbar ul {

        list-style: none;

        height: 1.6em;

        font-size: 0.8em;

        border-left: 1px solid white;
 
        }

        #navbar ul li {

            float: left;

            display: inline;

            width: 11%;

            background: black url(images/blockdefault.gif) center center repeat-x;

            height: 100%;

            border-right: 1px solid white;

            }

            #navbar ul li a {

                display: block;

                text-decoration: none;

                height: 1.6em;

                text-align: center;

                width: 100%;

                }

            #navbar ul li a:link, a:visited , a:hover, a:active{

                color: white;

                }

            #navbar ul li a:hover {

                background: black url(images/blockactive.gif) center center repeat-x;

                }

            #navbar ul li a[class="selected"] {        /* use of attribute selector to choose the one in the toolbar that is currently selected , unsupported in IE6*/

                background: black url(images/blockactive.gif) center center repeat-x;

                }

drhowarddrfine

Oh the hell of fluid pages.

Look into resetting your margins and padding all to zero and then setting them to exactly what you want. This keeps all browsers on the same page in that area since defaults can be different.

EDIT: Well, I see you've done that already. I'll try and look at it again later.

dartanian

Thanks for taking a look at this. I've spent a load of time on it but since it works as intended on Opera, FF, and IE6 it seems peculiar that IE7 and Safari would render it similarly incorrectly. Any other ideas?

Horizontal navbar formatting incorrectly in IE7 and Safari

Post your reply

Similar topics