XHTML/CSS

Bonjour,
voila je suis en train de faire une page en html auquel j'attache un feuille de style CSS.
Mais j'ai un petit problème qui se présente, je voudrait faire une barre d'accès rapide qui se présente sous forme de ligne.


par exemple:

( ACCUEIL FORUM TUTOS).

un peu comme sur se site ( en haut dans lequel nous pouvons voir accueil forum astuces télécharger etc...).


voila mais le problème se présente ici.

Lorsque je redimensionne mon firefox ou internet explorer mes liens passent les uns en dessous des autreset décale toute ma page. Comment éviter cela?

voici le code html

<div id="speedbar">
	<ul id="accesrapide">
	
		<li class="accueil">
			<a href="index.html"><img style="border: none;" src="images/accueil.png" alt="accueil" /></a>
		</li>
		
		<li class="forum">
			<a href="forum.html"><img style="border: none;" src="images/forum.png" alt="forum" /></a>
		</li>
		
		<li class="moncompte">
			<a href="moncompte.html"><img style="border: none;" src="images/compte.png" alt="moncompte" /></a>
		</li>
		
		<li class="tutos">
			<a href="tutos.html"><img style="border: none;" src="images/tutos.png" alt="tutos" /></a>
		</li>
		
		<li class="contact">
			<a href="contact.html"><img style="border: none;" src="images/contact.png" alt="contact" /></a>
		</li>
		</ul>
</div>

Voici le css

#speedbar {
	float: left;
}
#accesrapide li {
	display: inline;
	float: left;
}

merci d'avance
loic7605