Little CSS Help Please

[Mister_Pister]

Using firefox the tabs at the top run ok, however in IE the Wifi/bluetooth adaptors link gets bent out of shape because the title is so long. What element should I be adjusting to prevent this and what property needs to be set? Would also like to know how to reduce the vertical width between the bars too

<style type="text/css">
#navigation a
{
color: #000;
background: #ffa20c url(../images/left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px;
}

#navigation a span
{
background: url(../images/right-tab.gif) right top no-repeat;
padding-right: 10px;
}
#navigation a:hover  {
color: #fff;
background: #781351 url(../images/left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(../images/right-tab-hover.gif) right top no-repeat;
padding-right: 10px;
} 
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li
{
float: left;
margin: 0 0 0 0;
overflow: auto;
padding: 0;
}
</style>

....


	<div id="navigation">
	<ul id="navigation">
	<li><a href='index.php'><span>Home</span></a></li>
        ...etc...
        </ul>
        </div>

cheers *** edit decided not to risk a banning and removed the link and put a ss in instead. Just noticed it happens in firefox aswell if you resize your window. How can I stop this annoying clipping?