Affichage ok sous IE mais pas sous FF !

Bonjour !
Je sais que ces soucis de compatibilité sont monnaie courante et j'ai parcouru plusieurs sujets, tuto, ... mais je ne trouve pas un cas semblable. Si j'ai mal cherché, mettez-moi un lien, je lirai !

Mon site se compose :
d'un menu horizontal
d'un menu gauche
d'un contenu central
d'un menu à droite

J'ai un margin de 10px entre le menu gauche et le contenu central. Idem entre le contenu central et le menu droite.

Sous IE7 et IE8, c'est OK. Sous FF, la partie centrale est collée au menu gauche et il y a un grand espace avant le menu de droite !

Le site est en refonte et en test donc, si vous voulez y accéder, il faut suivre ce lien : http://www.khanysims.be/index-test.php

Attention, des pages n'existent pas et les 404 sont fréquents lol

D'avance un grand merci pour votre aide !

Si vous avez besoin de mon CSS, dites-le moi et je l'afficherai !

je joins
- l'image sous FF : page complète avec les deux menus

- l'image marquée GC est sous Google Chrome : page avec menu gauche et partie centrale seule. Malgré tout, la partie centrale est "rétrécie" (je l'ai lavée avec Dash donc, je vois pas pourquoi )
Modifié par khany (31 Aug 2009 - 11:28)

Si je comprends bien, ton souci porte sur le menu gauche, la partie centrale et le menu droit!

Pourrais tu donner le css de ces trois block?

Merci de te pencher sur mon souci ! Il doit bêtement me manquer un attribut qui est facuiltatif sous IE mais impératif sous FF ou GC.

@charset "windows-1252";

body {width: 1190px; margin: auto; padding auto; background: url(images/fond_sims.png) repeat}

div#entete {width: 1190px; text-align: center; margin-top: 20px}

div#menu_h {border: none; margin-top: 20px; background-color: #FFFFAD; border: thin ridge}	
div#menu_h_creations {width: 1190px; border: none; margin-top: 20px; background-color: #FFFFAD; border: thin ridge}	  


div#menu {width: 202px; float: left; border: none}
div#menu_g1 {width: 192px; height: 320px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}
div#menu_g2 {width: 192px; height: 150px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge}
div#menu_g3 {width: 192px; height: 300px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge}


div#menu_d {width: 200px; float: right; border: none}
div#menu_d1 {width: 190px; height: 260px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge; margin-left: 8px}
div#menu_d2 {width: 190px; height: 400px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge; margin-left: 8px}


div#contenu {width: 1190px; height: 1900px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}
			
div#contenu_centre {text-align: center}
p#titre_contenu {font-family: Comic Sans Ms; font-size: 16pt; padding-left: 10px; font-style: italic; color: maroon; text-decoration: underline}
p#titre_contenu_gauche {text-align: left; font-family: Comic Sans Ms; font-size: 16pt; padding-left: 10px; font-style: italic; color: maroon; text-decoration: underline}

div#contenu_story {width: 885px; height: 3800px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}


p#fin {text-align: center}
div#pied_page {width: 1000px; font: Courier New; font-size: 8pt; height: 20px; text-align: center; margin-top: 40px; padding: 5px}
img {border: none}
h3 {text-decoration: underline; font-family: Rockwell Extra Bold; text-align: center}

Désolée pour le "linéaire" du CSS mais j'ai hérité de WebExpert pour faire mon site et lui, il remet tout en ligne !

J'ai retiré tout ce qui met en page les <ul> - <li> - <a> etc ... car cela faonctionne.
C'est juste FF qui "massacre" ma partie centrale, qu'elle soit entourée de menu ou sans menu à droite.

Surtout n'hésitez pas à me poser des questions pour cerner d'où vient le "hic" ! Merci

C'est tout le css que tu as?

Car dans le code html apparait:

<div id="contenu_index">

Or je ne le vois pas dans le css

j'ai du trop "nettoyé" le CSS ! je te le remets !

div#contenu_index {width: 780px; height: 1000px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}

il y a d'autres DIV des contenu mais il n'y a que la propriété "height" qui change pour certaines pages ayant plus de contenu !
Modifié par khany (31 Aug 2009 - 14:17)

Voilà le css que j'ai pu trouver qui affecte ta page:

@charset "windows-1252";

body {width: 1190px; margin: auto; padding auto; background: url(images/fond_sims.png) repeat}

div#entete {width: 1190px; text-align: center; margin-top: 20px}

div#gogo {width: 1090px; text-align: right; margin-top: 2px; font-family: Arial; font-size: x-small; font-color: green}

div#modif {width: 1190px; text-align: center; margin-top: 5px; font-family: Arial; font-size: small; font-weight: bold; font-color: silver}

div#menu_h {border: none; margin-top: 20px; background-color: #FFFFAD; border: thin ridge}	
div#menu_h_creations {width: 1190px; border: none; margin-top: 20px; background-color: #FFFFAD; border: thin ridge}	  

ul#menu_horizontal li {display: inline; padding: 0 1 px; font-family: Comic Sans MS; font-size: large; font-weight: bold}
ul#menu_horizontal li a:link {color: #006600; text-decoration: none}
ul#menu_horizontal li a:hover {color: #000099; text-decoration: overline}
ul#menu_horizontal {list-style-type: none}

div#menu {width: 202px; float: left; border: none}
div#menu_g1 {width: 192px; height: 320px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}
div#menu_g2 {width: 192px; height: 150px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge}
div#menu_g3 {width: 192px; height: 300px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge}
ul#menu_gauche {list-style-type: none}
ul#menu_gauche li {padding-top: 10px; font-family: Comic Sans MS}
ul#menu_gauche li a:link {color: #006600; text-decoration: none}
ul#menu_gauche li a:hover {color: #000099; text-decoration: overline}  

div#menu_story {width: 300px; float: left; border: none}
div#menu_g_story1 {width: 290px; height: 220px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}
div#menu_g_story2 {width: 290px; height: 320px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}

div#menu_d {width: 200px; float: right; border: none}
div#menu_d1 {width: 190px; height: 260px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge; margin-left: 8px}
div#menu_d2 {width: 190px; height: 400px; margin-top: 10px; text-align: center; background-color: #FFFFAD; border: thin ridge; margin-left: 8px}

div#contenu_index {MARGIN-LEFT:205px; width: 780px; height: 1000px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}
div#contenu_story {width: 885px; height: 3800px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge}
div#contenu {width: 1190px; height: 1900px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}
div#contenu_creations {width: 1190 px; height: 1500px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge; text-align: center}
div#contenu_creations_pp2 {width: 1190 px; height: 3000px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge; text-align: center}
div#contenu_angels {width: 1190 px; height: 1900px; margin-top: 10px; background-color: #FFFFAD; border: thin ridge; text-align: center}
p#comment_creations {font-family: Arial; font-size: medium; font-style: italic}	

			
div#contenu_centre {text-align: center}
p#titre_contenu {font-family: Comic Sans Ms; font-size: 16pt; padding-left: 10px; font-style: italic; color: maroon; text-decoration: underline}
p#titre_contenu_gauche {text-align: left; font-family: Comic Sans Ms; font-size: 16pt; padding-left: 10px; font-style: italic; color: maroon; text-decoration: underline}

div#contenu-story {width: 780px; height: 3700px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}

div#contenu-preferences {width: 780px; height: 2300px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}

div#contenu-textures {width: 780px; height: 3400px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}

div#contenu-enfants {width: 780px; height: 2000px; margin-top: 10px; background-color: #FFFFAD; float: right; border: thin ridge}

p#fin {text-align: center}

div#pied_page {width: 1000px; font: Courier New; font-size: 8pt; height: 20px; text-align: center; margin-top: 40px; padding: 5px}
img {border: none}
h3 {text-decoration: underline; font-family: Rockwell Extra Bold; text-align: center}

Jai ajouté la propriété margin left a contenu_index et cela fonctionne sur ff

Je vais tester cela ! J'espère que du coup, cela ne va pas "bousiller" IE

Je ne peux pas UP du pc sur le quel je suis mais dans 2 heures je suis chez moi et je ferai des tests avec ta modif !

Merci d'avoir pris le temps de dépatouiller mon CSS !

Encore un petit truc : j'ai lu quelque part que le DOCTYPE des pages peut avoir de l'influence sur l'affichage. J'ai suivi des cours XML, XSLT et DTD il y a quelques temps mais, je n'ai pas souvenir du fondement d'une telle affirmation !

Si jamais l'ajout de cette propriété modifie l'apparence sur les autres navigateurs, regarde ici. Tu y trouveras ce que l'on appel les hack css qui te permettront de limiter la lecture d'une propriété à un navigateur précis.

Mais dans tout les cas le découpage en div et le css ne sont pas "propre" mais plus de la bidouille.

Je te conseille du peut etre simplifié tout cela.

khany a écrit :

Encore un petit truc : j'ai lu quelque part que le DOCTYPE des pages peut avoir de l'influence sur l'affichage. J'ai suivi des cours XML, XSLT et DTD il y a quelques temps mais, je n'ai pas souvenir du fondement d'une telle affirmation !

En effet mais cela concerne le html/css, tout simple car certaines règles ne sont pas interprete de la même manière que tu sois en HTML4, XHTML STRICT, XHTML TRANSI....

dutom007 a écrit :
Si jamais l'ajout de cette propriété modifie l'apparence sur les autres navigateurs, regarde ici. Tu y trouveras ce que l'on appel les hack css qui te permettront de limiter la lecture d'une propriété à un navigateur précis.

Mais dans tout les cas le découpage en div et le css ne sont pas "propre" mais plus de la bidouille.

Je te conseille du peut etre simplifié tout cela.

merci !
et pour le nettoyage, je vais m'y mettre car c'est toujours ainsi : on commence petit puis c'est l'empilage de modif qui mène à la maguoille !

Je vais essayer de placer aussi des "class"

merci !