Problème de navigation réalisé avec CSS

**Mihai** · 17/09/2005, 23h48

Bonjour tout le Monde,

Voila mon problème : j'ai un fichier HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="CSS.css" type="text/css">

</head>
<body>
<table width="100%" border="0">
<tr><td height="200" background="BanniereHaut.jpg"></td></tr>
</table>
<div id="navcontainer">
<ul>
<li id="active"><a href="#" id="current">Accueil</a></li>
<li><a href="#">Techniques</a></li>
<li><a href="#">Graphiques</a></li>
<li><a href="#">Inscription</a></li>
<li><a href="#">Société</a></li>
</ul>
<form action="" id="search">
<div align="right">
<input name="searchFor" type="text" size="30">
<a href="" id="search1">Recherche</a>
</div>
</form>
</div>
</body>
</html>

et
le CSS suivant :

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 70%;
font-family: arial, helvetica, sans-serif;
font-weight:bold;
height:1.55em;
}

#navcontainer ul li { display:inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

#search
{
float:right;
width: 30%;
color: White;
background-color: #036;
height:1.55em;
}

#search1
{
padding: 0.2em 1em;
color: White;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-weight:bold;
}

#search a:hover
{
background-color: #369;
color: #fff;
}
Si par exemple dans IE on diminue la fenêtre du navigateur, la barre de navigation (qui est une liste non ordonnée) est toute tordue - les élements se mettent sur la verticale... Je ne sais pas comment faire pour que ça ne bouge pas!
Merci pour votre réponse