[HTML]Błędne wyświetlanie grafiki w IE, nie można ustawić jej w jednej linii z tekstem Opcje

[mefistofeles]

Mam taki kodzik:

[HTML] pobierz, plaintext 
<strong>Ocena:</strong> <span class="pokaz-w-linii">
<ul class="ocenianie-gwiazdki male-gwiazdki">
<li class="aktualna-ocena" style="width:'.$widthoce.'%;" title="Aktualna ocena to '.$ocena[$i].'">Aktualna ocena to '.$ocena[$i].'</li>
</ul>
</span>
[HTML] pobierz, plaintext 

Oraz taki css do niego:

[CSS] pobierz, plaintext 
.pokaz-w-linii{ display:-moz-inline-block; display:-moz-inline-box; display:inline-block; vertical-align: middle; }
.ocenianie-gwiazdki { position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
.ocenianie-gwiazdki li { display: inline; }
.ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
.ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
.ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
.ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
.ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
.ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
.ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
.ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
.male-gwiazdki { width:70px; height:14px; }
.male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
.aktualna-ocena { background-image: url(images/gwiazdki_kategory.gif); line-height: 14px; height: 14px; }
[CSS] pobierz, plaintext 

Problem polega na tym, że koło napisu "Ocena:" w tej samej linii mają pojawić się gwiazdki.
W FF i Operze wszystko jest ok, w nieszczęsnym IE gwiazdki spadają do nowej linii i mimo różnych kombinacji nie mogę uzyskać w IE
zadowalającego efektu.

Z góry dziękuję za pomoc.

Powód edycji: [Ociu]:

[mefistofeles]

Zmodyfikowałem ten kod tak jak mówiłeś.

Teraz mam:

[HTML] pobierz, plaintext 
<div style="float:left"><strong>Ocena:</strong></div> 
<ul class="ocenianie-gwiazdki male-gwiazdki">
</ul>
[HTML] pobierz, plaintext 

i css:

[CSS] pobierz, plaintext 
.ocenianie-gwiazdki {float: left; position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
.ocenianie-gwiazdki li {float: left; display: inline; }
.ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
.ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
.ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
.ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
.ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
.ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
.ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
.ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
.male-gwiazdki { width:70px; height:14px; }
.male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
[CSS] pobierz, plaintext 

I ciągle gwiazdki zjeżdżają na dół ...

Powód edycji: [Ociu]: