<ul> space issue

[iowadevguy]

I know i've seen this question raised several times but have yet to see a solution that works for my problem. I'm creating a ul for my nav so I can have text links with background image rollovers. I've also have a image in between each link to add a graphic item that was wanted. Before I added the spacer images, my nav was fine...afterwards though it put spaces above and below each link.

Here is the link to the nav. If anyone has any ideas, please help.

http://www.valvestatevisuals.com/sidebar/leftnav.html

thanks

[iowadevguy]

quick update - by taking out the <li> tags around the images it fixed the problem in firefox but not internet explorer. is this good practice though?

<ul id="nav">
<li><a href="#">GAMES</a></li>
<img src="images/nav_spacer.jpg"/>
<li><a href="#">GAMES</a></li>
<ul>

[Centauri]

The only thing that can be a direct child of the <ul> can be an <li>.

Take out all the spacer images and extra <li>s from the html, and apply the spacer image as a background to the bottom of the <li>s :#nav li {
padding-bottom: 6px;
background: url(images/nav_spacer.jpg) no-repeat left bottom;
}If you don't want the spacer after the last menu item, you can give that <li> a class to remove the padding.