[help] mise en page CSS IE/Netscape

[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:

 <!--[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 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

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

[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 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.

je vais essayer de trouver qq chose à ce sujet.

A+

[Sebastien]

Merci Missmonde! ca marche 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.

[Sebastien]

Merci encore pour ton aide 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...

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

[MissMonde]

Salut,

c'est nickel sous firefox.

contente d'avoir pu t'être utile

Martine