[Résolu] Mon tableau déborde de la div rien qu'avec IE8

Bonjour,
Tout est dans le titre : j'ai une div "grand-mère", à l'intérieur j'ai une div "mamie" qui sert de partie droite à mon site, à l'intérieur j'ai une div "maman" et dedans j'ai un tableau de seulement 2 colonnes.
Avec Firefox, Opera et IE8 en mode de compatibilité tout va bien. En IE8 normal le tableau déborde à droite et je ne comprend même pas à quoi il s'adapte !
J'ai essayé pas mal de pistes (fixer les largeurs des div, enlever les images en float, fixer la largeur du tableau) rien n'y fait et là je ne sais plus. Si qq peut m'aider ...
Le code est un peu touffu à copier/coller alors voici le lien : http://www.cave-lamoulissoise.com/index.php

Voici le CSS :

body {
background-color:#ffffff;
margin: 0px; /* RAZ des marges : en théorie tous les enfants de body vont hériter */
padding: 0px;
}

.principal {
background-color:#ffffff;
margin:5px auto; /* permet de centrer */
padding: 0px;
width: 955px;
position: relative;
border:#ff0000 solid 0px;
font-family: "Times New Roman", Times, serif;
/*overflow:hidden;*/
}


/************* les 2 colonnes *********/
.col_g { /* bleue */
float: left;
border:#0000FF solid 0px;
margin: 1px 16px 1px 1px;
padding: none;
height: auto;
width: 350px;
overflow: hidden;
}


.col_d { /* verte */
border:#00ff00 solid 1px;
margin: 1px 1px 1px 16px;
padding: none;
height: 2000px;
width: 568px;
overflow: hidden;
}

/********* fin des colonnes **********/

.menu_main {
border:#ff0000 solid 0px;
margin: 0px 0px 60px 0px;
padding: none;
height:170px;
overflow: hidden;
position: relative;
}

.taches {
position:absolute;
}

.change {
border:#2256ee solid 1px;
margin: 0px 0px 0px 0px;
width:560px;
padding: none;
}
.........
.produits {
background-color:#9FC;
border-spacing:20px;
}

.produits td {
border:#9f2a25 solid 1px;
width: 50%;
padding: 5px;
}

.produits img {
max-width: 100px;
margin : 5px;
}

Modifié par nimel (18 Apr 2010 - 09:09)

Bonsoir,

Pour fixer une largeur a un tableau et empecher celui-ci de n'en faire qu'a sa guise :

pour la balise table :
width:560px; (selon ta page a vue de nez)
et
table-layout:fixed;

en principe , la ton tableau devrait se compresser dans une largeur de 560px .

En gros : width + table-layout a mettre en oeuvre conjointement dans les style pour <table>.

cordialement,
GC

Merci ça marche. J'avais testé le width mais je ne connaissais pas table-layout. Et effectivement, il faut mettre les deux pour annuler le bug.

Mais quand même, est-ce-bien normal cette différence IE8 ? J'avais cru comprendre qu'il était sensé respecter d'avantage les normes, or là, d'après mes modestes connaissances, un tableau est un élément de type block et quand un type block n'est pas positionné il doit s'adapter en largeur à son conteneur, et non pas à son contenu ? Non ?

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Par ailleurs merci d'indiquer que ton sujet est [Résolu] si c'est le cas.

Bonne continuation


Modifié par Mikachu (17 Apr 2010 - 11:40)

Mes excuses .. pas fait exprès ...