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:
-
#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;
-
}
-
