Bonjour à tous.

Cela fait deux jours que je me casse la tête sur ce problème, et je l'ai tellement retourné dans tous les sens que je ne sais même plus quelle est vraiment la cause de tout ça.

Je travaille sur un site en HTML simple et CSS, a priori rien de compliqué. Je dois rendre ce site lundi, et pour moi tout était bien dans les temps. Si on y accède par Firefox, à cette adresse : http://www.centrezander.fr, tout est parfait. Mais avec Internet Explorer, le menu de gauche est complètement dénaturé, et se balade en plein milieu de la page !

J'étais partie d'un code libre donné sur Alsacréations, donc je pensais que je n'aurais aucun problème, et pourtant, c'est bien le cas...

Voici la copie d'écran du site sous Firefox :

http://img513.imageshack.us/my.php?image=firefoxqm9.png

Et celle sous Internet Explorer :

http://img530.imageshack.us/my.php?image=ieff5.png

Voici le code HTML concernant le menu :

index.html
<div id="gauche">
<ul class="menugauchebleu">
 
  <li><a href="">Accueil</a></li>
 
</ul>
<ul class="menugauchesable">
 
  <li><a href="">Notre établissement</a></li>
 
</ul>
 
<ul class="articlebleu">
 
  <li><a href="">Environnement</a></li>
 
</ul>
 
<ul class="articlesable">
 
  <li><a href="">Historique</a></li>
 
</ul>
 
<ul class="articlebleu">
 
  <li><a href="">Visite guidée</a></li>
 
</ul>
 
<ul class="menugauchebleu">
 
  <li><a href="">Notre société</a></li>
 
</ul>
 
<ul class="menugauchebleu">
 
  <li><a href="">Nos activités</a></li>
 
</ul>
 
<ul class="menugauchebleu">
 
  <li><a href="">Vous êtes un patient</a></li>
 
</ul>
 
<ul class="menugauchebleu">
 
  <li><a href="">Vous êtes un nouveau
professionnel</a></li>
 
</ul>
 
</div>

Et voici la partie CSS concernant ce menu :

style_ie.css
#gauche { border: 1px none #0550b3;
    background-color: transparent;
    width: 180px;
    float: left;
    }
 
  .menugauchesable { border: 1px solid #e8d266;
    margin: 0px;
    color: #000000;
    font-family: Verdana;
    font-size: 10pt;
    text-decoration: none ! important;
    background-color: #ffffcc;
    list-style-image: url(http://www.centrezander.fr/images/rs.gif);
    list-style-position: inside;
    }
 
  .menugauchebleu { border: 1px solid #0550b3;
    font-family: verdana;
    font-size: 10pt;
    color: #000000;
    text-decoration: none ! important;
    background-color: #cde2ff;
    list-style-image: url(http://www.centrezander.fr/images/rb.gif);
    list-style-position: inside;
    }
 
  .menugauchesable a { color: #000000;
    font-size: 10pt;
    font-family: Verdana;
    text-decoration: none ! important;
    list-style-position: inside;
    }
 
  .menugauchebleu a { font-family: verdana;
    font-size: 10pt;
    color: #000000;
    text-decoration: none ! important;
    list-style-position: inside;
    }
 
  .articlebleu a { font-family: verdana;
    font-size: 10pt;
    line-height: 0px;
    color: #000000;
    text-decoration: none ! important;
    list-style-image: url();
    list-style-position: inside;
    }
 
  .menugauchesable a:hover { text-decoration: none;
    list-style-position: inside;
    }
 
  .articlebleu a:hover { color: #000000;
    font-family: verdana;
    font-size: 10pt;
    line-height: 0px;
    text-decoration: none ! important;
    list-style-image: url();
    list-style-position: inside;
    }
 
  .articlebleu { font-family: Verdana;
    font-size: 10pt;
    line-height: 0px;
    color: #000000;
    text-decoration: none ! important;
    background-color: #ffffff;
    list-style-image: url(http://www.centrezander.fr/images/ab.gif);
    list-style-position: inside;
    }
 
  .menugauchebleu a:hover { font-family: verdana;
    font-size: 10pt;
    color: #000000;
    text-decoration: none ! important;
    list-style-position: inside;
    }
 
  .articlesable a { font-family: verdana;
    font-size: 10pt;
    line-height: 0px;
    color: #000000 ! important;
    text-decoration: none ! important;
    list-style-position: inside;
    }
 
  .articlesable { font-family: verdana;
    font-size: 10pt;
    line-height: 0px;
    color: #000000;
    text-decoration: none ! important;
    background-color: #ffffff;
    list-style-image: url(http://www.centrezander.fr/images/as.gif);
    list-style-position: inside;
    }
 
  .articlesable a:hover { font-size: 10pt;
    line-height: 0px;
    color: #000000;
    text-decoration: none ! important;
    list-style-position: inside;
    }

Si quelqu'un peut m'aider à résoudre ce problème, je vous en serait éternellement reconnaissante... Sinon je sens que mon stage ne sera même pas rémunéré :'( (remarquez, c'est vrai que j'aurais dû penser à ce problème plus tôt... Mea maxima culpa...)

Merci beaucoup

PS : J'ai tenté de faire en sorte qu'IE et Firefox voient deux feuilles de styles différentes, pas de problème là dessus. Mais je ne trouve pas ce que je dois changer dans la feuille pour IE pour que ça fonctionne mieux (et que ça ressemble quand même un peu à ce qu'on voit avec Firefox) donc même sans trouver quelque chose de compatible avec les deux, je voudrais qu'on m'aide sur le css à mettre pour IE seulement... Encore merci !

Bonjour,

C'est pas facile de regarder ton code car en faisant un copier-coller on se retrouve avec tous tes n° de lignes...

De plus tu ne mets pas le code html pour la div où tu as ton texte, c'est ça qui aurait été intéressant.

Bon, dans l'essai que j'ai fait, tout marche avec ton code. J'ai juste ajouté au bout de ton code html une div pour ton texte et elle se place bien à côté des menus , aussi bien sous Firefox qu'avec IE.

@+

Salut à tous,

J'ai le même problème mais dans l'autre sens : parfait sous IE mais il y a un décalage sous Firefox !

Mon site : www.essb.fr

Merci de vos remarques sur ce qui pourrait poser problème ...

Djé

Bonsoir,

Tout d'abord, merci beaucoup de ta réponse. En fait, une fois la tête refroidie, je me suis replongée là dedans, et je crois bien que j'avais fait quelques bêtises. Et puis, sans en être totalement sûre, je pense que mon éditeur html n'y est pas pour rien, car j'utilise Nvu et je m'aperçois qu'il me met parfois du code en doublon, des trucs comme ça...

Et je viens de remarquer que, pour que la boîte du menu s'affiche correctement sous IE, il suffisait de préciser des 0px pour les marges, ce dont je pensais qu'il s'agissait des réglages par défaut...

Bref, fausse alerte, dirons nous, et d'autant plus que j'ai refait tout le menu sur le site définitif en utilisant un code trouvé sur Alsacréations, et qui rend exactement ce que je cherchais à faire au départ (à savoir un menu déroulant, que j'avais simulé en html simple)...

Merci encore pour ta réponse et ta disponibilité, j'avoue que j'ai paniqué pour pas grand chose, mais il faut dire que mes délais me mettent un petit peu la pression, surtout pour un premier stage (et une première véritable conception de site web)... ^^'

Merci encore, et bonsoir !

Bonsoir

Et sous IE7 ça donne

Une petite question, à quoi ça sert d'avoir une feuille de style pour ie (style_ie.css) qui est exactement la même que la feuille de style par défaut (style.css) et quand je dis la même c'est vraiment la copie conforme.

J'étais partie d'un code libre donné sur Alsacréations, donc je pensais que je n'aurais aucun problème, et pourtant, c'est bien le cas...

Le problème ne vient pas du code d'Alsacréations mais de ce qui a été mis dedans après. D'ailleurs je ne reconnais guère le code origine surtout pour le css.

Je n'ai pas vérifié mais le gros soucis doit venir de ton div #gauche avec sa position fixed, voir ici http://wiki.mediabox.fr/documentation/css/position

Oui alors pour tout te dire, j'ai eu quarante versions de mes feuilles de style et je me suis un peu plantée en les uploadant, bref à la fin j'ai refait mon ie_style.css en prenant l'autre feuille comme modèle, et comme par la suite je suis sortie du boulot, j'ai pas refait de changements dessus ^^'

Et effectivement, j'ai fait un peu n'importe quoi avec le code de départ j'avoue ^^' non, vraiment, j'ai paniqué pour rien, je suis navrée... Maintenant tout est rentré dans l'ordre, j'ai viré le div de toutes façons, et je me débrouille avec un menu en listes de définitions + javascript qui fonctionne niquel et pareil sous ie comme sous Firefox. Il faudra que je fasse confirmer pour Opera mais je pense qu'il n'y a pas de raisons.

Mais quand même, des fois, IE nous emm***e bien ! :-/ (et les débutants e html et css aussi XD )

Merci encore de votre aide

re

Et bien je vois que ça traine pas.

Juste pour te confirmer que sous IE7 cette fois c'est bon et sous Opéra 9 ça passe aussi.

Mais quand même, des fois, IE nous emm***e bien ! :-/ (et les débutants e html et css aussi XD ) on est bien d'accord.

Oui, j'ai IE7 d'installé sur mon ordi (pour les cas d'urgences de ce genre ;)) mais je ne savais pas pour Opera, merci beaucoup pour l'info !

Vraiment merci à tous, quand je vois des communautés solidaires comme celle-ci, je me dis qu'Internet ne fait pas que pervertir les hommes (contrairement à ce que les Delarue et compagnie tendent à vouloir démontrer ) !