Navigation Bar Issue in IE 6/7

[besler3035]

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

 

[citizenzen]

Methinks it's the display:block that's done you wrong.


#nav ul li{

float:left;
display:block;
border-right:1px dotted #fff;
margin-right:10px;
}​

 

[besler3035]

Methinks it's the display:block that's done you wrong.


#nav ul li{

float:left;
display:block;
border-right:1px dotted #fff;
margin-right:10px;
}​

That fixes it in IE, but then pushes the arrows down in all other browsers. I tried doing a few different display properties for the IE classes (separate stylesheet now), and am not sure what to do next...help!

 

[agiphone]

There's some extra code here and some issues. Here's how I would do it:

1. set the width of the nav bar in the wrapper.
2. no need for display: block on ul and li; they are block elements by definition
3. ul doesn't need to be float: left
4. li doesn't need to be float: left, but needs to be display: inline
5. if you want the anchor element to extend the width of the li, than you need to declare it display: block and give it a width=width of li
6. if you need a border-right, set it on the li to separate the link
7. instead of positioning the background img top, left, you can simply remove them if the image is of the right size to display where you want; by default, any background img is positioned top, left [or, in other words, 0,0]

Hope this helps

 

[harpster]

I'm no css expert but from messing with it for a little bit I think this may be causing or a part of your problem... The "height:30px" when removed will put the nav back to horizontal in IE6. Now I don't have your graphics so I'm looking at more of a frame outline but you might want to check that part of the code to see if that makes a difference from you.

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