CSS Cross-Browser Image Divider within Navigation - css

Question

I am having this issue and I am hoping that it is so simple and that is why I can not figure it out.
I want to use an image divider inbetween navigation <li> elements.
Here is my CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
Here is the HTML:
<ul id="nav">
<li class="page-item-2 current_page_item">Home</li><span class="divide"></span>
<li class="page-item-20">Our Program</li>
<li class="page-item-10">Social</li>
<li class="page-item-13">Economic</li>
<li class="page-item-15">Environmental </li>
<li class="page-item-17">Resources </li>
</ul>
Currently I only have one divider in there because I am testing it. This code works fine in FF but IE is destroyed by it. Anyone shed some light on this frustrating situation?
UPDATE:
The one is right and the other is not. I was able to create the same error in FF so you can see both. (Just moved the <span>)

Answer 1

<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
Then, in order to make the divider appear closer to the list items, just adjust the margin/padding of the .divider class

Answer 2

First thing's first:
A span cannot be a direct child of a ul element. It is not standard HTML, and so there's no telling what might happen. Only lis can be children of uls.
Suggestion:
I would, were I you, put the divide class on an li instead. That way, you have standard HTML at the very least, and maybe it'll even fix the page. Other than that, I would need a link to a demo as Bears will eat you suggested to be of any assistance.
I'm not entirely sure what "entire background" means, but I'm going to suggest that you use background-position and background-repeat to help. Read through these and it should help you figure out what you'd like to do.