Komisches CSS verhalten?

[Dieter Falk]

Hallo Forum,

ich habe ein Menü in HTML und die dazugehörigen Stylesheets geschrieben. Das Menü ist wie folgt aufgebaut:

<ul id="menubar">
 <li class="newdate"><a href="">Neuen Termin anlegen</a></li>
 <li class="newnews"><a href="">Neue News anlegen</a></li>
 <li class="overview"><a href="">Übersicht</a></li>
 <li class="archiv"><a href="">Archiv</a></li>
 <li class="account"><a href="">Kontoeinstellungen</a></li>
 <li class="logout"><a href="">Logout</a></li>
</ul>

und mein CSS Code dazu sieht so aus:

#menubar {
 background-color:#bfd33e;
 font-size:0.750em;
 padding:5px 0px 5px 5px;
 margin:0px;
}

#menubar li {
 padding-left:30px;
 padding-right:10px;
 height:24px;
 margin:0px;
 list-style:none;
 background-position:2px 0px;
 background-repeat:no-repeat;
}

.newdate {
 background-image:url(./img/newdate.gif);
 float:left;
}

.newnews {
 background-image:url(./img/newnews.gif);
 float:left;
}

.overview {
 background-image:url(./img/overview.gif);
 float:left;
}

.archiv {
 background-image:url(./img/archiv.gif);
 float:left;
}

.account {
 background-image:url(./img/account.gif);
 float:left;
}

.logout {
 background-image:url(./img/logout.gif);
}

Nun zu dem Problem: Wenn ich das letzte Element, also das LI mit der Class "logout" nicht Links floaten lasse, dann steht der Text zwar rechts neben dem Element "account", aber das Hintergrundbild ist ganz links unter dem von "newdate". Wenn ich das LI Element mit der Class "logout" links floaten lasse, dann wird das UL Element mit der ID "menubar" nicht mehr richtig dargestellt.

Hat da jemand eine Idee?

Vielen Dank für die Hilfe!

Gruß, Dieter