CSS Vertical Nav - IE vs FF/Opera width issue

[MicahDB]

All,

I've always done graphical navs, but love the flexibility and cleanliness of CSS navs. That said I've been trying to use them more. I'm having trouble with this one and I'm hoping someone can help.

Here's the css for the right nav.

/* override of current page by ID */
#nav1 a#nav1, #nav2 a#nav2, #nav3 a#nav3, #nav4 a#nav4, #nav5 a#nav5, #nav6 a#nav6, #nav7 a#nav7, #nav8 a#nav8  {
background-color: #b5cbe7;
}	
	#nav, #nav ul { /* all lists */
 float: left;
 width: 223px;
 list-style: none;
 /*background-color: #A0958A;  old value = 908474 */
 font-weight: normal;
 padding: 0;
 margin: 0px;
 text-align:left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 width : 223px;
 
	
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		/*line-height : 1.25em;*/
		margin-bottom : -1px;
		width: 223px;

	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.05em;
		margin-top : -1.35em;

	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 223px;
		*w\idth : 203px;*/
		wi\dth:203px;
		display : block;
		color : #003366;
		font-weight : normal;
		text-decoration : none;
		background-color : #e3e2dd;
		/*border : 1px solid black;
		padding : 0 0.5em;*/
		border-bottom: 1px solid #ffffff;
		border-top: 1px solid #ffffff;
		padding-top:6px;
		padding-bottom:6px;
		padding-left:20px;
	}
	
	#nav li a:hover {
		color : white;
		background-color : #003366;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}

I've tried some hacks (that's I'm clearly not good at) in the 'nav li a' line. The 203 seems to be just right for FF/Opera but no so good for IE...in IE 203 is to short. The column is 223px and that's what I want it to be.

I'd post the site, but I'm developing it locally as I'm traveling.

Thanks,
Micah

 

[MicahDB]

Sorry, here are the links I meant to post last time of the images...

http://staging2.themediabug.com/ff.gif

http://staging2.themediabug.com/ie.gif

 

[Vragabond]

It looks like you're the victim of the IE box model bug. This can easily be remedied. If you add complete and valid doctype (and nothing at all above it), your IE6 or later will use correct box model and will render the same as FF. If you're using IE pre 6, then I suggest you upgrade (if you need to support those ancient browsers, I recommend using IE conditional comments to adjust the size for them). If you are using a complete and valid doctype and still having trouble (make sure you remove all the hacked widths and use just one), then please post your html and css (or best, just link to the site) and we will try and see where the problem is coming from.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]