Mam pewien problem zrobiłem sobie menu górne (poziome)

HTML

[HTML] pobierz, plaintext 
    <div id="header">
        <div id="text-head">
            <ul>
                <li><a href="index.php" class="header">Home</a></li>
                <li><a href="index.php" class="header">Forum</a></li>
                <li><a href="index.php" class="header">Rejestracja</a></li>
                <li><a href="index.php" class="header">Logowanie</a></li>
                <li><a href="index.php" class="header">Regulamin</a></li>
                <li><a href="index.php" class="header">Pomoc</a></li>
                <li><a href="index.php" class="header">Kontakt</a></li>
                <li><a href="index.php" class="header">Reklama</a></li>
            </ul>
        </div>
    </div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
div#header {
 
    margin: 0 auto;
    background-image: url('images/header.png');
    background-repeat: repeat-x;
    height: 28px;
    width: 972px;    
}
 
div#text-head {
 
    padding-top: 7px;
 
}
 
ul, ul li {
 
    word-spacing: 50px;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
 
}
 
ul li {
 
	display: inline;
	white-space: nowrap;
}
 
.header {
 
    color: #FFFFFF;  
    text-decoration: none;
    border: none;     
 
}
[HTML] pobierz, plaintext 

I teraz chcę obok każdego linku umieścić mały obrazek, ale gdziekolwiek nie postawię znacznika <img> to obrazek zawsze leży na początku belki.
Czym to jest spowodowane?

nie można umieszczać elementów blokowych(img) w elementach liniowych(li ma ustawione inline). jeśli obrazek jest jeden to spróbuj ustawić jako tło, jeśli nie to nadaj elementom li display: block; i float: left;, powinno pomóc.

ewentualnie dla li dispaly:block i float:left.

a co napisałem?...

O rzeczywiście. Wybacz roztargnienie. Nie doczytałam.