Navbar displays incorrectly in IE7 and Safari but correctly in FF,IE6,Opera [resolved

[dartanian]

I have a navbar that is slightly modified from the solid block example at http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/.

Everything works great on IE6, FF2, Opera9 but the menu is compressed and not rendered as intended on Safari and IE7. I've tried playing with a lot of different CSS settings such as widths on the <a> and <li> tags as well as adding !important. Nothing seems to work and I can't figure out why. I've got no other ideas. Please help. Thanks.

The site is http://sinaiem.org. The relevant CSS is:


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

[mvy]

#navbar { /* horizontal navbar on top inside container */
float: left;
background-color: transparent;
margin-left: 12%;
padding: 1.5em 0%;
width: 80%;
}

I added the width ( width:80%;)and it worked.....you will have to test it to not push your outside container.....

Hope this helps............

[dartanian]

That worked. Thanks!!