28173 sujets

CSS et mise en forme, CSS3

Mise en forme de div contenant des tableaux : problèmes

Bonjour,

J'ai un problème de mise en forme de ma page web avec les div et les tableaux. Firefox me renvoi ce que je souhaite mais IE6 met le tableau compris dans "contenu" en dessous du menu de gauche. Le plus simple pour que vous compreniez est que je vous donne le code de la page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	color:#FFFFFF;
}

#corps {
	z-index:1;
	margin: 0 auto 0 auto;
	margin:0 auto 0 auto;
	width: 900px;
	background-color: #000000;
}

#entete {
	padding: 0px 0px 10px 0px;
	background-color: #333333;
}

#conteneur {
	margin: 0px;
	padding: 0px;
	background-color: #666666;
}
#colonne_gauche {
	float:left;
	background-color: #CCCCFF;
	width:200px;
}
#contenu{
	padding: 0px 50px 10px 50px;
	margin-left: 200px;
}
div.spacer {
  clear: both;
  visibility: hidden;
}

-->
</style>
</head>
<body>
<div id="corps">
  <div id="entete">Bandeau + menu </div>
  <div id="conteneur">
    <div id="colonne_gauche">
		<ul>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		</ul></div>
    <div id="contenu">test
      <table width="100%" border="2" cellspacing="0" cellpadding="0">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
		<div class="spacer"></div>
  </div>
</div>
</body>
</html>

J'ai cherché dans tous les sens mais je débute en CSS et je ne connais pas toutes les subtilités. J'ai testé avec clear, float, etc mais je n'arrive jamais à mon résultat. Pourquoi ce satané contenu (tableau) se retrouve-t-il en bas ?

Si quelqu'un à la solution, je suis preneur !!!

Bye,
Jano
Modifié par janoyolo (05 Jul 2006 - 09:16)
Bonjour,

a écrit :
Pourquoi ce satané contenu (tableau) se retrouve-t-il en bas
De mémoire, je crois que IE fait apparaître un bug dans le calcul des dimensions des éléments du fait d'une gestion spécifique des arrondis lorsque l'on mixe plusieurs unités (désolé je n'ai plus le détail en tête). Du coup, ton tableau et tout ce qui doit être autour (marges, padding...) ne peut plus tenir à coté du flottant, alors il chasse.

a écrit :
Si quelqu'un à la solution, je suis preneur !!!
Il y a en de multiple. Par exemple passe ton tableau à 99%.

Enfin un conseil, toutes les caractéristiques de style du tableau width="100%" border="2" cellspacing="0" cellpadding="0" devraient plutôt se retrouver dans les CSS.
Modifié par Xavier (05 Jul 2006 - 12:53)
Salut,

Je viens de tester en passant mon tableau à 99%, ça fonctionne nickel. Merci encore.

Xavier a écrit :

Enfin un conseil, toutes les caractéristiques de style du tableau width="100%" border="2" cellspacing="0" cellpadding="0" devraient plutôt se retrouver dans les CSS.

Effectivement, je compte gérer tout en css, c'était pour la mise en forme rapide.

Merci à vous.

Bye,
Jano
Sujet clos
Aller à