IE6/7 Navigation Bar Problems

HTML & CSS
1

http://projects.mindutopia.com/rddc2/getinvolved.php

In every other browser, the navigation works right and displays across that red bar. In IE 6 and 7, however, it’s stacked. Any way to fix this? My styles are as follows:

#nav{
	height:30px;
	background:#b62939;
}

#nav ul{
	display:block;
	float:left;
	width:970px;
	list-style:none;
}

#nav ul li{
	float:left;
	display:block;
	border-right:1px dotted #fff;
	margin-right:10px;
}

#nav ul li.last{
	border:none;
	margin-right:0px;
	display:block;
}

#nav ul li a, #nav ul li a:visited{
	background:url(images/menu_bg.gif) top left no-repeat #b62939;
	height:30px;
	display:block;
}

#nav ul li a:hover{
	background:url(images/menu_bg_hover.gif) top left no-repeat #b62939;
	height:30px;
	display:block;
}
2

Hi,

Your link doesn’t seem to be working but I’m guessing that the problem is that your anchor also needs to be floated otherwise it pushes the list to 100% wide in IE6 due to a bug.


#nav ul li a{float:left}
3

Also you’ve got a lot of redundant HTML - like not ONE of those display:block’s is even neccessary since floats are inherently display:block, and nothing you set display to can change that (though display:inline trips a IE bugfix)

I’d have to see the markup to be 100% certain, but I also get the nagging feeling you are applying styling to your LI that should be on the anchors instead, though that hinges on if you have dropdown/flyout menus on it.

As Paul said, if your link wasn’t broken we could tell you more.