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/cs...id-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!!