[Résolu] IE6 : float:left et table width:100%

Bonjour,

Je constate un problème avec IE6 pour faire cohabiter un div en float:left et un table width:100% qui est placé dans un div avec un margin-left qui laisse la place à la colonne de gauche.

Avec firefox, mon tableau se trouve bien à droite du div en float:left.
Par contre avec IE6, il ne commence d'après le div en float:left.

Je sais qu'en enlevant la propriété width:100%, mon tableau revient à sa place. Mais je tient à laisser cette propriété pour pouvoir afficher une bordure sur toute la largeur.

Savez-vous comment fixer ce problème ?
Modifié par fleuveblanc (17 Mar 2009 - 10:49)

Salut,

Cela vient du fait que le modèle de boite n'est pas traité pareil par le navigateur de Microsoft.
La somme de tes largeurs de blocs et de tes marges dépasse de la largeur totale accordée. Du coup, le bloc de droite passe sous le précédent.
Il faut que tu ajuste tes marges pour IE à l'aide des commentaires conditionnels.

Merci de répondre.

Il ne me semble pas qu'il s'agisse de ça :
- je ne suis pas en mode quirks. Mon doctype est bon. Je l'ai rendu invalide pour vérifier et ma page s'affiche différement.
- J'ai essayé avec padding:0; border:0; margin:0; pour tous les éléments sauf
#content {width:600px; margin:auto;} et #centerwithleft {margin-left:200px;} et le problème est toujours là.

Pour les commentaires conditionnels, je sais les mettre en place. Mais il faudrait déjà que je trouve ce que je vais mettre dedans. C'est surtout ça mon problème.
Modifié par fleuveblanc (04 Dec 2007 - 16:32)

Bonjour,

Avec un width à 99% le tableau se met à la bonne place dans IE.6

Par contre le problème persiste sous IE5.5 (je suis face au même problème et je doit le régler pour IE5.5 :'( )

edit : un width:auto/inherit ou avec une valeur en px fixe le problème pour IE5.5.
Modifié par Hermes (05 Dec 2007 - 11:19)

Bonjour,

Sous IE6:
- Three Pixel Jog qui repousse le contenu du bloc de droite de 3px vers le côté;
- du coup, un bloc de largeur 100% (ou ayant une largeur supérieur à 100%-3px) ne tient plus, et passe à la ligne en dessous de la zone d'influence du Three Pixel Jog.

On peut déplacer le problème en conférant le layout au conteneur de droite. (Voir la FAQ.)

Bien vu ! Ca règle en effet le problème.

J'avais pourtant pensé au Three Pixel Jog, mais j'avais appliqué un height:1%; à mon tableau (.blog dans mon exemple) et non au div (#centerwithleft dans mon exemple) qui le contenait.

Merci beaucoup en tout cas.
Modifié par fleuveblanc (06 Dec 2007 - 10:18)