Looks good in ie7 and firefox, but not in ie6

I've been building a website and have this one problem I don't have too much experience with, so I was hoping for some help.

Here's the CSS:

#navigation {
background : #ffffff url(../images/nav.jpg) repeat-x;
padding : 0.6em 0 5px;
font-weight : bold;
width : 100%;
height : 35px;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
#navigation ul, #navigation ul li {
list-style : none;
margin : 0;
padding : 0;
}
#navigation ul {
padding : 5px 5px 5px;
text-align : left;
}
#navigation ul li {
display : inline;
}
#navigation ul li a {
text-decoration : none;
padding : 5px 5px;
border : 1px solid transparent;
}
#navigation ul li span {
padding : 0 5px 0 5px;
}
#navigation ul li a:hover span {
text-decoration : underline;
}
#navigation ul li a:hover {
background : #ffffff url(../images/hover.gif) repeat-x;
border : 1px solid #75a6f8;
}
#navigation #current a {
background-position : 0 -150px;
}
#navigation #current a span {
background-position : 100% -150px;
}
* html #navigation ul li a {
padding : 0;
}

HTML:

and the HTML..

<div id="header"><img src="images/header.jpg" width="770" height="165" /></div>

<div id="navfluid">
<div id="nav">
               <div id="navigation">
                        <ul>
                                <!-- CSS Tabs -->
<li class="regular"><a href="index.html" class="homenavbar"><span>Home</span></a></li>
<li class="physicalblue"><a href="physical-rebuilding.html"><span>Physical</span></a></li>
<li class="financialgreen"><a href="financial-rebuilding.html"><span>Financial</span></a></li>
<li class="cognitivecyan"><a href="cognitive-rebuilding.html"><span>Cognitive</span></a></li>
<li class="emotionalred"><a href="emotional-rebuilding.html"><span>Emotional</span></a></li>
<li class="joyyellow"><a href="joy-spirit-rebuilding.html"><span>Joy</span></a></li>
<li class="regular"><a href="my-story.html"><span>My Story</span></a></li>
<li class="regular"><a href="coaching-rebuilding.html"><span>Coaching</span></a></li>
<li class="regular"><a href="my-helpful-places.html">Helpful Links</a></li>
<li class="regular"><a href="write.html"><span>Write!</span></a></li>
                 </ul>
    </div>
</div>
</div>

HTML:

Here are images of the problem.

 

Thomas
View this site there are some nice vertical & Horizontal menu tutorials and samples there.
Might be helpfull for you.
http://css.maxdesign.com.au/listamatic/

 

Thank you for your reply, but I already have it designed and really like the look of it. I was hoping it was something quite simple that I missed. Maybe my best bet is adding some code into the CSS that only ie can see?

Anyone else have any suggestions?

 

Ah I fixed it, I took my own advice and put a _ in front of the css element, meaning its only for ie5. Changed the code for ie to match what it looks like in firefox

Thanks

 

Thats good to hear