Version complète: sur le forum Webmaster Hub : [help] mise en page CSS IE/Netscape
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Sebastien
Je suis en train de bidouiller une page en full css : http://s.billard.free.fr/test/
Ca passe bien sous IE mais sous netscape 7.01 c'est la cata. J'ai beau regarder je vois pas ce qui pose probleme?
xpatval
Eh bien tt simplement la gestion des listes à puces !

J'ai eu ce genre de problème aussi, resolu par un petit tour de passe-passe donné ici.

Essaie cela, en modifiant les margin pour netscape, et en gardant les valeurs définies pour IE:

CODE
<!--[if IE]>
<style>
#menugauche ul {
tes valeurs définies Pour IE6
}
#menudroit ul }
tes valeurs définies pour IE6
}
</style>
<!--[end if]-->


et dans ta feuille de style, tu modifies les valeurs de #menugauche ul, #menudroit ul, de façon à ce que cela soit correct avec Netscape.

xpatval
Sebastien
Ah sad.gif ya pas moyen de faire quelquechose valable pour tout le monde?

Et comment je trouve les valeurs pour Netscape?
Xavier
Ça a à voir avec les valeurs par défaut appliquées aux listes. Sans doutes pour des raisons historiques.

C'est discuté dans cet article de blog-and-blues : il faut spécifier à la fois le padding et le margin. Et tout rentre dans l'ordre wink.gif

C'est plus "joli" que d'utiliser les commentaires conditionnels, et surtout ça permet de résoudre le problème sans en créer un autre pour d'autres navigateurs (je pense à Opera qui gère cela comme IE et qui aurait donc forcément eu un peu de peine avec cette technique).
Sebastien
Je spécifié margin et padding mais ca resoud en rien mes problemes de position de blocs...le menu de gauche bouffe toujours sur le contenu et celui de droite part loin à droite
MissMonde
Salut Sébastien,

A première vue, tes 2 blocs posant problème sont en position absolue et tu indiques un margin-top et un top pour chacun d'eux.

Utilise uniquement le top.
Sebastien
Merci Missmonde, j'ai corrigé, le code est plus propre mais toujours ce decalage en largeur sad.gif
MissMonde
Essaie ceci :

menu gauche

top : 100px;
left : 5%;

menu droit

top : 100px;
left : 80%;

qu'est-ce que ça donne ?
Sebastien
Argh ca detruit tout dans IE smile.gif et dans netscape le menu gauche est approximativement calé par contre le droit il s'en va tres loin encore plus à droite
MissMonde
J'ai téléchargé ta source et ton css.

chez moi, avec IE6 et FFox, ça marche.

il y a un tout petit décalage d'environ 1px au raccord que je n'ai pas réussi à solutionner avec les %

tu dois positionner les 2 div absolues avec uniquement 2 valeurs.

la solution que je t'ai donnée plus haut provoque un décalage du menugauche, car surIE etFF, la largeur n'est pas rendue de la même manière, il faut donc définir les points de positionnement de façon à avoir le point fixe qui touche la partie centrale.

pour le menu droit c'est bon, top:100px et left: 80%

pour le menu gauche, il faut mettre top:100px et right:80%.

je ne sais pas si c'est compréhensible, ce que je raconte, mais à part le petit pixel de décalage, ça marche.
MissMonde
Bonjour Sébastien,

en regardant ta page, telle que tu l'as faite, en 800x600, il y a un décalage du menu gauche même avec IE.

alors qu'avec ma solution, il ne reste qu'un pixel à solutionner. wink.gif

je vais essayer de trouver qq chose à ce sujet.

A+
Sebastien
Merci Missmonde! ca marche smile.gif reste juste a éliminer ce pixel dont je vois pas l'origine... ca existe pas un soft qui mets en couleur les zones de margin padding et cie des fois? ca serait utile
MissMonde
A mon avis, le décalage provient du fait que les % ne sont pas assez précis.

J'ai retouché la page en me servant des em et ça tombe pile poil.

Voici les changements que j'ai fait :

1. le conteneur :

- taille d'origine 85%, je l'ai convertie en 54em pour avoir une taille à peu près équivalente.
- j'ai rajouté une position relative pour que les 2 div positionnés en absolu le soient (positionnés) en fonction de lui (du conteneur).

2. le contenu :

- taille d'origine 70%, c'est devenu 37em, là aussi, c'est à peu près.
- marges gauche et droite d'origine: 15% application du même calcul (différence entre 54em et 37em divisé par 2 = 8.5em) donc 8.5em pour chaque marge.

3. les menus gauche et droit

- la taille d'origine de 15% devient 8.5em pour chacun
- le top est resté à 100px mais comme il est maintenant positionné par rapport au conteneur et non plus par rapport au body, il faut peut-être enlever les 10px (? je ne sais plus le chiffre exact) de top-margin du conteneur, ce qui donne 90px.
- le positionnement horizontal de 80% devient 45.5em (54 - 8.5).

Voilà, j'espère que ce n'est pas trop confus. wink.gif
Sebastien
Merci encore pour ton aide :up: en fait il doit effectivement s'agir d'une histoire de calcul des %... il semble que je l'ai résolu en mettant left: 85.05%; a mon menu de droite. Ca ne change rien dans Netscape qui affichait deja bien mais ca s'affiche bien maintenant dans IE. 0.05% même en haute résolution ca reste en dessous de la taille d'un pixel... smile.gif

Ca s'affiche bien dans firefox? http://s.billard.free.fr/test/
MissMonde
Salut,

c'est nickel sous firefox. :up:

contente d'avoir pu t'être utile wink.gif

Martine
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.