Mozilla 1.8 : un Gecko "différent" ?

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 :

<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/93114053-pourquoi-il-ny-aura-pas-de-mozilla-18
http://www.cybersdf.org/?2005/03/13/32-comment-firefox-et-thunderbird-ont-tues-la-suite-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.
Modifié par Raphael (13 May 2005 - 14:22)

Bonjour Raphaël,

J'ai étudié ton premier exemple. J'obtiens un résultat identique sur Mozilla 1.7.4, Safari 1.3, Firefox 1.0.4, à savoir décalage de la div jaune, pas de décalage du paragraphe vert. Seul IE6 fait l'inverse.

C'est conforme à mon attente puisque IE ne respecte pas la fusion des marges.
La fusion des marges concerne les blocks imbriqués (d'ailleurs nous en avions déjà parlé il y a plusieurs mois sur ton blog je crois.)
Voici un extrait du lien que tu mentionnes :

a écrit :
...celles-ci pouvant être l'une à côté de l'autre ou imbriquées...

Pour briser la fusion:
- un padding non nul
- une bordure
- la propriété float
- {overflow:auto}

La fusion des marges n'est pas si compliquée que cela. Le gros problème c'est que IE ne respecte pas cette règle.

Sinon si le padding ne convient pas, tu peux toujours mettre une bordure de couleur identique au fond. Ou alors le overflow:auto sur le container fonctionne très bien.

Au fait tu l'as eu où ton Mozilla 1.8 ? D'après moi cette version en est restée au stade alpha, développée par Mozilla et effectivement abandonnée. Je ne crois pas qu'il y ait eu d'autres évolutions, et surtout basées sur un autre moteur de rendu. De plus il me semble que le comportement que tu décris est le même que celui de FF, Mozilla 1.7.
Modifié par Xavier (13 May 2005 - 16:13)

Elle n'est pas abandonnée, simplement plus soutenue officiellement par la fondation Mozilla.

Le plus simple pour tester Gecko 1.8 est d'utiliser une compilation nocturne de Firefox.
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Raphael a écrit :
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 ?

Les 2 ont Gecko comme moteur de rendu mais pas la même version (en tapant about: dans la barre d'adresse) : 1.7.8 pour FF1.0.4 et 1.8b pour Moz1.8b. Le futur moteur de rendu de FF1.1 sera le 1.8.

(et le descendant de la suite Mozilla sera toujours basé sur Gecko)

Xavier a écrit :
La fusion des marges n'est pas si compliquée que cela. Le gros problème c'est que IE ne respecte pas cette règle.

Pas compliqué, pas compliqué, oui pour nous
Mais 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)

Xavier a écrit :

Sinon si le padding ne convient pas, tu peux toujours mettre une bordure de couleur identique au fond. Ou alors le overflow:auto sur le container fonctionne très bien.

Mouais, bref des bidouilles quoi.
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".

Xavier a écrit :

Au fait tu l'as eu où ton Mozilla 1.8 ? D'après moi cette version en est restée au stade alpha, développée par Mozilla et effectivement abandonnée. Je ne crois pas qu'il y ait eu d'autres évolutions, et surtout basées sur un autre moteur de rendu. De plus il me semble que le comportement que tu décris est le même que celui de FF, Mozilla 1.7.

Ce n'est pas moi qui ai testé Moz1.8 (enfin la version alpha).
Par contre, je viens d'installer et de tester Moz1.7 et tu as raison, le comportement est le même.
Modifié par Raphael (13 May 2005 - 16:26)

Raphael a écrit :
Ce n'est pas moi qui ai testé Moz1.8 (enfin la version alpha).

Il y a eu 6 alpha et la dernière en date est une beta, les choses ont pû largement bouger entre temps (logique en phase de développement).

a écrit :
Mouais, bref des bidouilles quoi.

N'exagérons pas. La norme définit les cas ou il y a fusion et ceux ou il n'y a pas fusion. Je ne faisais que lister ceux ou il n'y a pas fusion.
Désolé si la fusion des marges ou la norme dans son ensemble ne te plait pas.

Maintenant il est bien vrai que CSS n'est pas spécialement simple globalement, et ce serait un tort de faire croire le contraire. De surcroît les bugs environnants n'améliorent rien. Personnellement je suis convaincu que le positionnement par tableau est plus facile lorsqu'on débute.

Pour exposer du CSS à un néophyte, le plus simple serait sans doute de ne pas spécifier ni margin ni padding et de laisser faire le navigateur avec ses valeurs par défaut dans le flux.
Modifié par Xavier (13 May 2005 - 17:08)

Xavier a écrit :

Pour exposer du CSS à un néophyte, le plus simple serait sans doute de ne pas spécifier ni margin ni padding et de laisser faire le navigateur avec ses valeurs par défaut dans le flux.

Pas tout à fait d'accord au niveau des tableaux, perso j'ai commencé le HTML et la mise en page avec les tableaux, et bien j'ai mis très peu de temps à passer à la mise en page CSS Enfin, ça doit dépendre des personnes.
Par contre, quelque chose de complexe, c'est bien les bugs et différences d'interprétation des navigateurs.

Le sujet est très proche de celui-ci :
http://forum.alsacreations.com/topic.php?fid=4&tid=1749