Design sous IE

Bonjour tout le monde

J'ai un problème avec un design, j'ai cherché partout et je sais que ce problème à déja été abordé et j'ai essayé les astuces pour qu'IE me gobe mon design mais rien n'y fait ou alors sous IE ça passe mais sous FF ça ne marche plus o_O

Donc le problème est avec les float (je pense), le cadre du centre
est décalé passe en dessous du cadre de gauche.
J'ai essayé un clear:both sur le cadre du centre (#contenu)
c'est un mieux sous IE mais c'est sous FF que le problème survient,
le même problème qu'il y avait sous IE...

Voici le code xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" type="text/css" href="style.css" title="default" media="screen" />
<link rel="shortcut icon" href="favicon.gif" type="image/ico" />
</head>

<body>
<div id="header"></div>

   <div id="fond">

<div id="tout_menu">

<div class="haut_menu">Titre titre titre</div>

<div class="contenu_menu">

<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
</ul>

</div>

<div class="haut_menu">Titre titre titre</div>

<div class="contenu_menu">

<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
</ul>

</div>

</div>

<div id="contenu">

<p style="text-align: center">ban</p>
<hr />

<p>
texte
</p>
</div>

<div id="footer"></div>

</div>



</body>
</html>

Et le code css :

body
{
width:833px;
background:url('img/fond.gif');
margin:auto;
margin-top:-2px;
font-family: "Times new roman", serif;
}

#fond
{
background-image:url('img/fond.jpg');
width:833px;
}

#header
{
background-image:url('img/header.jpg');
background-repeat:no-repeat;
width:833px;
height:207px;
}

#tout_menu
{
float:left;
width:184px;
}

ul,li
{
margin:0;
list-style-type: none;
}

li:before
{
content: "* ";
}

img
{
border: 0px none;
}

.contenu_menu
{
width:159px;
margin-left:63px;
border-left: 1px solid #09AAF0;
}

.haut_menu
{
background-image:url('img/haut_menu.jpg');
background-repeat:no-repeat;
width:187px;
height:56px;
margin-left:52px;
font-weight: bold;
color: #58bcf0;
}

#contenu
{
padding-right:30px;
float:right;
width:570px;
clear:both;
}

#footer
{
clear:both;
background-image:url('img/footer.jpg');
background-repeat:no-repeat;
width:833px;
height:24px;

}

Quelqu'un aurait-il une idée?
Utiliser les marges peut etre?

Voila merci aux gens qui prendront le temps de me lire

EsKuel

19 décembre 2005 à 13:04:40