Visual issue with nav bar

[angryhenrik]

Hello,

Having an issue with my navigation, in IE6 and FF. Both have different issues.

In IE6 the gap between tabs seems to be filled with the background colour of the tab itself. In FF this isn't a problem.

CSS;

#nav    {list-style:none;border-bottom:5px #304F47 solid;padding-bottom:11px; margin-left:20px; margin-right:20px;font-family: arial, helvetica, sans-serif; font-size:medium;color:#FFFFFF;} 

#nav li {display:inline;padding-bottom:12px;background-color:black; background-image: url("images/tab_left.gif");background-position: left top; background-repeat:no-repeat;}

#nav li a {background-image: url("images/tab_right.gif");padding-bottom:12px; background-repeat:no-repeat;color:#FFFFFF;background-position: right top;padding-left:10px; padding-right:10px;text-decoration:none;} 

HTML
<ul id="nav">
<li><a href="#" target="_blank">Main SCS Home</a></li>
<li><a href="#">Gallery one</a></li>
<li><a href="#">Gallery two</a></li>
<li><a href="#">Gallery three</a></li>
<li><a href="#">Gallery four</a></li>
</ul>

In FF this problem with the gap isn't an issue, but it's indenting the tabs from the left. This is more likely a problem with my understanding of padding/margins.

You'll have to forgive me, I'd post an image to make it easier, but I don't seem to be senior enough!

Thanks for any help.

[eruna]

ie use margins differnetly than other browsers.
Usually I will create an ie stylesheet linked below the regular stylesheet hidden by ie "conditional comments" (try googling and you'll find it). Then I adjust the margins seperatly for ie.