Marge incomprehensible sous IE

Ca fait plusieurs heures que je me bats avec un bug de layout qui n'apparait que sous Internet Explorer, et plus j'essaie des trucs, plus je m'enfoncem ce qui est particulierement frustrant vu que c'est le seul bug qui empeche mon template d'etre approuve.

Vous pouvez le voir par vous-meme a cette adresse : http://www.epseelon.net/design/mainLayout.html
Dans la div#center, a droite de la leftbar, la zone a fond gris, vous voyez le tableau est decale de 3px sur la droite sous IE, et meme le paragraphe en-dessous sur toute la hauteur du menu a gauche, ce qui ne devrait pas arriver normalement puisque les deux elements sont dans des divs separes. Enfin bref, j'en perds mon latin. Si quelqu'un me trouve ce qui ne va pas... il aura toute ma gratitude jusqu'a la fin des temps (ah ouais nan mais je suis un fou moi !).

Please help !

Tu pourrais mettre ton code CSS et HTML, ce serait plus facile pour t'aider

TheReverendEVIL a écrit :
Tu pourrais mettre ton code CSS et HTML, ce serait plus facile pour t'aider

Désolé, je suis tellement habitué à utiliser les petits plugins de Firefox (genre EditCSS et autres view rendered source) que j'en oublie la nécessité des sources. Voilà qui est réparé : j'ai mis l'archive avec le HTML, le CSS et les images téléchargeable à cette adresse : http://www.epseelon.net/design.zip

Salut,

Tu devrais commencer par corriger ça dans ton CSS :

Validateur de CSS du W3C a écrit :
Erreurs
URI : file://localhost/webdeveloper_www.epseelon.net_1144438050265.css

* Ligne: 10 Contexte : #center table

Propriété érronée : padding-left Les valeurs négatives de -3.0 ne sont pas autorisées : -3px
* Ligne: 50 Contexte : #nav, #nav ul

Propriété érronée : line-height Erreur lors de l'analyse grammaticale. - [empty string]

Effectivement, bien vu... et corrigé. Bon ça résoud pas mon problème mais ça part plus propre. Par contre, ce qui est intéressant, c'est que cette petite correction m'a donné l'occasion de tester mon layout sur ma machine perso avec IE7 beta 2 et le bug n'apparait plus avec cette version. De là à dire qu'IE7 améliore effectivement le support des CSS, on ne va pas extrapoler mais bon au moins ça veut dire que cette marge a à voir avec un des trucs que IE interprète à sa sauce et qu'il a corrigé dans sa nouvelle version.

C'est simple, le problème c'est que tu met une marge de 200px à gauche de ton #center. Les marges sont différente d'un navigateur à l'autre. Je te suggère d'essayer de mettre ta boite rouuge en float left et ensuite ton #center en float left également. il vont se coller l'un sur l'autre. Mais la il faut que tu te trouve un moyen de mettre ta largeur de ton #center pour qu'il arrive a prendre ton espace au complet.

Honnêtement je coderais d'une autre manière, ça serait plus facile, enfin il me semble. Bon amuse toi bien.

Bref ton probleme c'est le margin-left de 200px

Zial a écrit :
C'est simple, le problème c'est que tu met une marge de 200px à gauche de ton #center. Les marges sont différente d'un navigateur à l'autre. Je te suggère d'essayer de mettre ta boite rouuge en float left et ensuite ton #center en float left également. il vont se coller l'un sur l'autre. Mais la il faut que tu te trouve un moyen de mettre ta largeur de ton #center pour qu'il arrive a prendre ton espace au complet.

Ben voilà, tout le problème il est là : à ma connaissance, les margins sont le seul moyen d'avoir des colonnes de largeurs fixes sur les côtés et une zone centrale qui prend tout le reste. Donc ici le float est exclu parce que je suis sur un layout liquide (largeur en pourcentage).

Zial a écrit :

Honnêtement je coderais d'une autre manière, ça serait plus facile, enfin il me semble. Bon amuse toi bien.
Bref ton probleme c'est le margin-left de 200px

Le problème c'est que je suis déjà parti d'un layout standard et propre et en théorie ça devrait fonctionner. Ce qui est frustrant, c'est que quand je commente la div de classe side-menu dans le code HTML, c'est-à-dire que je vide la div#leftbar, la marge de 3px disparait.

C'est ça qui m'énerve avec CSS : je fixe exprès la largeur de la leftbar à 200px mais dès qu'il y a quelque chose à l'intérieur qui est plus large, la leftbar s'agrandit et les 200px ne servent à rien et ça me fout tout mon layout en l'air. Du coup, ce que je mets à l'intérieur d'une div influence le contenu d'une autre div complètement indépendante.

Le plus gros problème c'est que bon, vous allez me dire, on s'en fout de la marge de 3px, ça aurait pu être plus grave. Mais en fait, c'est plus grave. Parce que normalement, le tableau dans la zone center devrait prendre toute la largeur, soit 100%. Mais si je mets la largeur du tableau à 100%, à cause de la marge il n'a plus de place et il descend dans la zone center jusqu'à ce qu'il en ait, c'est à dire jusqu'en dessous du niveau du side-menu. Et si j'ai plein de side-menus à gauche, et ben mon tableau va descendre d'autant. Tout ça à cause de cette fichue marge sortie d'on ne sait où. La seule solution que j'ai trouvé jusqu'à présent, ça a été de mettre la largeur du tableau à 99.5% mais ça ne fait pas disparaitre cette marge et puis rien ne me garantit que ça va marcher pareil dans toutes les résolutions.

Enfin bref, je m'embourbe...

Salut,

c'est un problème lié au haslayout chez IE, voir : http://www.test.blog-and-blues.org/haslayout/

donc la solution dans ton cas serait sans doute de donner le layout au conteneur de l'élément en float:left;
Soit :

<!--[if IE]>
<style type="text/css">
#wrapper {
zoom:1;
}
</style>
<![endif]-->

Ca m'a l'air d'être exactement ça !!! Malheureusement le coup du zoom sur le wrapper n'a pas l'air de fonctionner mais je vais investiguer ça de suite. En attendant prépare toi à recevoir toute ma gratitude

Voilà, ça y est, la solution est un peu bricolée mais elle fonctionne : j'ai appliqué le zoom:1 sur la div#center, ce qui lui a donné le layout. Du coup, la marge est apparue à l'extérieur de la div#center au lieu d'apparaitre à l'intérieur et avec un jeu de background-color on n'y voit que du feu.

Merci du fond du coeur mister clb56. Tu maitrises et tu l'as ma gratitude