<li> che vanno a capo ma non dovrebbero

[Nemesis_RM]

Ciao, qualcuno mi spiega perchè le schede arancioni si mettono una sopra l'altra invece di mettersi una accanto all'altra?
http://nemesisdesign.altervista.org/hps/index.php

ecco il codice del foglio di stile

ul#schede{
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 117px;
height: 22px;
}
ul#schede li{
float: left;
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
width: 117px;
height: 22px;
color: white;
text-align: center;
background-image: url(./img/scheda.gif);
background-repeat: no-repeat; 
background-position: top;
background-color: transparent;
cursor: pointer;
font-weight: bold;
}
ul#schede a:link,
ul#schede a:visited,
ul#schede a:active,
ul#schede a:focus
{
float: left;
padding: 0px;
margin: 0px;
width: 117px;
height: 22px;
color: white;
text-align: center;
font-family: verdana;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
background-color: transparent;
}
li#active{
color: white;
text-align: center;
float: left;
margin: 0px;
padding: 0px;
width: 117px;
height: 22px;
background-image: url(./img/scheda2.gif);
background-repeat: no-repeat;
background-position: top;
background-color: transparent;
cursor: pointer;
}
ul#schede li#active,
ul#schede a:hover{
background-image: url(./img/scheda2.gif);
background-repeat: no-repeat;
background-position: top;
background-color: transparent;
color: white;
text-align: center;
width: 117px;
height: 22px;
padding: 0px;
margin: 0px;
float: left;
}
.ins{
display: inline;
color: white;
text-align: center;
width: 117px;
height: 22px;
padding-top: 5px;
margin: 0px;
cursor: pointer;
} 

e il codice html relativo al menu

<div class="schede">
<ul id="schede">[*][url="about.html"]<div class="ins">About</div>[/url][*][url="staff.html"]<div class="ins">Staff</div>[/url][/list]
</div> 

VI prego aiutatemi mi ci sto troppo incastrando!!