Page 1 sur 1

Mozilla 1.8 : un Gecko "différent" ?

Publié : 13 mai 2005, 14:11
par SIBELIUS
Bonjour à tous,

Je suis en-train de me casser les dents sur quelques essais qui fonctionnent partout (notamment sur Firefox), mais pas sur... Mozilla (en tout cas pas sur Mozilla 1.8).
Pourtant le moteur de rendu, Gecko, est censé être le même, non ?

Voici le gros exemple qui pose problème :

Code : Tout sélectionner

<div><p>paragraphe de texte</p></div>

div {
width : 300px ;
height : 200px ;
background : yellow ;
}
p {
margin-top : 2em ;
margin-left : 3em ;
width : 100px ;
height : 100px ;
background : green ;
}
Sur cet exemple, le bloc div est dimensionné et le paragraphe est censé être décalé dans le div.
Or sur Mozilla, le top décale le <div> et non le <p> !

Cela ressemble à un soucis de marges fusionnées mais ce phénomène n'est pas censé s'appliquer à mon exemple (blocs imbriqués) mais uniquement à des blocs frères.

J'ai essayé avec d'autres unités que "em", d'autres balises que <p>, j'ai supprimé les dimensions (height, width) mais rien n'y fait : la marge haute s'applique au conteneur <div> !

Je suis très étonné qu'il y'ait autant de différences de rendu alors que le moteur est le même que Firefox.
Après une recherche plus poussée, j'ai vraiment l'impression que le problème viendrait *uniquement* de cette version 1.8 de Mozilla qui se démarque des autres puisque depuis cette version ce n'est plus la Mozilla Foundation qui gère ce navigateur. Il est donc possible que le moteur ait changé.
Quelques sources non officielles :
http://standblog.org/blog/2005/03/11/93 ... mozilla-18
http://www.cybersdf.org/?2005/03/13/32- ... te-mozilla

Est-ce possible ?

Sinon, comment expliquez-vous ce phénomène et, surtout, avez-vous un moyen de le contourner en utilisant un moyen logique, simple, sans hack et qui fonctionne de la même manière sur l'ensemble des navigateurs actuels courants ?

Merci d'avance.

PS : au fait, est-ce que les personnes qui possèdent d'autres versions de Mozilla (1.7 par ex) pourraient elles aussi tester l'exemple et me dire s'il s'affiche correctement ?

Tant qu'à faire, les possesseurs de Safari, ou Netscape version récente (8 par ex) peuvent me laisser leurs commentaires aussi svp.

Note : c'est très important pour moi.

Publié : 13 mai 2005, 14:18
par Humpfff
Sans rentrer dans le détail de tes questions : Mozilla 1.8 et Firefox 1.0 n'utilise pas la même version du moteur Gecko. Mozilla 1.8 utilise la version 1.8 de Gecko dont devrait disposer le futur FF 1.1

Un billet de Pascal Chevrel à propos de Moz 1.8a6

Publié : 13 mai 2005, 16:24
par Bobe
La fusion des marges se produit aussi pour les boîtes imbriquées (si pas de bordures ou marges internes séparant les marges externes pour le bord supérieur ou inférieur considéré).

Publié : 13 mai 2005, 16:29
par pascal
Il y a quelques différences sur la fusion des marges entre Gecko 1.7 et Gecko 1.8. évidemment c'est la version 1.8 qui a raison.

Si tu as à choisir un comportement, choisis celui de Mozilla 1.8 qui utilise Gecko 1.8, d'ici deux mois Firefox utilisera aussi ce moteur.

Publié : 13 mai 2005, 16:34
par SIBELIUS
Merci messieurs,

Selon vous, comment faire pour expliquer très simplement à un non connaisseur comment placer un élément en flux dans un autre ?
(ex padding = gros ennuis sur IE si le conteneur est dimensionné)

Publié : 13 mai 2005, 16:49
par pascal
je viens de faire una page test et j'ai le même rendu dans FF1.0.4 et dans Mozilla 1.8 et safari 1.3

Le seul qui a le comportement qque tu attends c'est IE6

Ma page est en html 4.01 strict

Publié : 13 mai 2005, 16:55
par SIBELIUS
Ça m'apprendra à tester avec le moteur "gecko" de HTML-kit :(

Bref ma question reste d'actualité : supposons que tu veuilles expliquer à un débutant qui vient juste d'apprendre le HTML ce qu'est le flux et comment placer les élements simplement dans le flux. Comment procéder de manière extrêmement simple et logique pour un débutant ?

D'après moi, le plus simple reste les marges et les paddings (sauf que ces derniers nécessitent un autre niveau de compréhension du bug Ie sur le boxmodel)

Sinon il reste des bidouilles (border, overflow, etc.).
Voilà qui ne va pas faciliter mon "évangélisation" des CSS aux débutants.
Je vais leur dire : "venez les gars on va apprendre un truc tout con, mais euh faudra tout de suite bidouiller pour que ça marche".

(désolé pour le double sujet dans un autre forum :-/)

Publié : 13 mai 2005, 17:37
par pascal
ton html kit doit utiliser une vieille version de gecko installée sur ta machine et pas la dernière (ça marche dans le mien ;) )

Sinon j'ai étudié le problème, il faut empêcher les marges de fusionner pour cela tu peux mettre une bordure sur ton div conteneur.

J'ai une autre solution qui évite de mettre une bordure mais c'est un horrible hack, pas forcément recommendable pour un tutoriel ;)

Publié : 13 mai 2005, 17:41
par SIBELIUS
pascal a écrit :Sinon j'ai étudié le problème, il faut empêcher les marges de fusionner pour cela tu peux mettre une bordure sur ton div conteneur.
Mouais, donc une bidouille quoi :-/

Désolé de renvoyer à un autre forum, mais comme la réponse à ce problème est assez importante pour moi, je me suis permis ce double sujet.
La question (et réponses) sont développées ici : http://forum.alsacreations.com/topic.ph ... d=3759&p=1