28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

j'ai un problème qui ne se présente que sous IE (comme d'habitude...) par rapport à un site en trois colonnes.

code html :

<!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" xml:lang="en" lang="en">
<head>

</head>
<body>
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
<div id="content">
...
</div>
</div>
</body>
</html>


et code css :

body {margin: 0px;padding: 0px;}
body #container {width: 980px;margin: 0px auto;}
#container #left {width: 180px;float: left;}
#container #right {width: 180px;float: right;}
#container #content {margin: 0px 180px 0px 180px;}


Bon, j'ai épuré le code car mon problème se situe uniquement ici.
C'est pour une refonte graphique d'un outil de CMS et certaines pages (la plupart...) possède des structures de ce type :

<table style="width: 100%" cellpadding="4" cellspacing="2">
<tr>
<td>...</td>
</tr>
</table>


Bon, je sais que c'est tout sauf génial mais c'est une contrainte que je ne peux pas empêcher...

Sous firefox, aucun problème. Sous IE, il semblerait que le tableau fasse 100% du contenu + son padding + son cellspacing. Donc, ca dépasse et le contenu démarre sous le contenu des colonnes gauches et droites.

J'ai bien essayé un attribut overflow mais cela semble poser problème avec le reste du code (je donnais bien évidement une largeur définie à content en plus de l'overlfow).

Donc, je sèche, je ne vois pas vraiment si il existe une possibilité.

D'avance, merci de votre aide !

Et passez de bonnes fêtes.
Salut Smiley smile

C'est un problème ultra-classique que j'ai déjà maintes fois rencontré, j'ai trouvé une solution très simple : entoure tes tableaux avec ce div :
<div style="width: 100%">
<table width="100%" cellpadding="2" cellspacing="2">
...
</table>
</div>

Et tu n'auras plus de décalage dans aucun navigateur.
Attention à bien mettre style="width: 100%" et non width="100%" dans le div, sinon ça ne marche pas (bien que normalement ces propriétés sont identiques... ) !