Aller au contenu

Gecko et Quirksmode


YoGi

Sujets conseillés

Bonjour tout le monde ,

Comme indiqué dans le titre et la description, j'ai un petit soucis avec les navigateurs basés sur Gecko (et d'autres ? je n'ai testé qu'IE, Opera et Moz/Firefox). En effet, je dois développer une application web en mode quirks (parce que le serveur d'application génère automatiquement une partie du code HTML et ne permet pas de modifier le doctype, doctype qui soit dit en passant est "invalide" et donc, à en croire Openweb, est supposé basculer les navigateurs en mode "quirks").

Je souhaite donc développer le site selon le modèle de boite de MS, toutefois le rendu sur Firefox est Mozilla n'est pas le rendu attendu (ou tout du moins, que j'attends), et tout me laisse croire que Gecko applique dans le cas que je vais vous présenter le modèle de boite standard.

J'ai repris tout bêtement l'exemple d'Openweb :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test de rendu</title>

<style>

<!--

  .jaune {

background-color: #ffff00;

width: 300px;

padding: 0;

border: 0;

  }

  .vert {

background-color: #00ff00;

width: 250px;

padding: 0 20px;

border-left: 5px solid #00ff00;

border-right: 5px solid #00ff00;

  }

//-->

</style>

</head>

<body>

<div class="jaune">

  box1

</div>

<div class="vert">

  box2

</div>

</body>

</html>

et l'ai testé sur IE 6, Firefox 1.0, Mozilla 1.7.3, Firebird 0.7 et Opera 7.6 preview . Le résultat est le suivant (petite image de 18ko) :

rendu.jpg

Tout me laisse croire que les rendus d'Opera et d'IE sont corrects (car ils sont ceux que j'attends :D). Il s'agit ici de Firefox 1.0, mais que ce soit moz ou firebird, le résultat est identique.

J'avoue ne pas trop savoir d'où vient le problème - si problème il y a - ou si j'ai mal compris les explications, mais j'avais toujours cru qu'un tel doctype était supposé basculer Gecko en mode Quirks. D'autre part, quand je fais click droit -> "view page info", il est bien indiqué que c'est le mode quirks et non standard compliant.

Si quelqu'un a une explication ou une piste, je suis preneur.

Merci d'avance.

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Je suis loin d'être un connaisseur, mais j'ai testé ton code et il apparait que ce soit le padding qui soit incriminé...

De plus je ne comprend pas ton intérêt de mettre des borders de la même couleur pour le deuxième bloc.

Je crois que la solution réside dans le calcul des paddings qui ne doivent pas être gérés de la même façon selon le navigateur, regarde la description du CSS du W3C : http://www.w3.org/Consortium/Translation/French

Lien vers le commentaire
Partager sur d’autres sites

Je ne dirais qu'une chose

le modèle de boite MS est un modèle MS et donc normal que gecko ne l'incorpore pas car ce n'est pas standard.

http://openweb.eu.org/articles/dimensions_boites_css/

Si tu as lu cet article tu as vu que

Selon le modèle standard, la largeur apparente d'une boîte sera logiquement égale à la somme de :

* la largeur spécifiée pour son contenu (propriété CSS width) ;

* la largeur totale de son remplissage gauche/droite ;

* la largeur totale de ses bordures gauche/droite.

Une boîte ayant un contenu de 250 pixels, des padding latéraux de 20 pixels chacun et des bordures latérales de 5 pixels chacune occupera donc à l'écran une largeur totale de : 250 + 20 + 20 + 5 + 5 = 300 pixels.

le padding sera compris dans l'image background mais pas margin.

et sous firefox et compagnie même en mode quirk le modèle de boite restera standard.

Mais pourquoi donc MS fait-il partie du W3C s'il ne respecte même pas les standards ??

Lien vers le commentaire
Partager sur d’autres sites

http://openweb.eu.org/articles/dimensions_boites_css/

Si tu as lu cet article tu as vu que

(...)

et sous firefox et compagnie même en mode quirk le modèle de boite restera standard.

Justement je l'ai lu

et j'ai aussi lu que :

Les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x...) exploitent la technique du DocType Switching, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher. Pour résumer, ces navigateurs récents opteront pour :

    * le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ;

    * le modèle Standard en présence d'une DTD HTML strict sur le modèle (...)

Sauf erreur de ma part, j'utilise ici une DTD sur le modèle indiqué ci-dessus en gras, donc si je comprends bien l'article, les navigateurs sont supposés opter pour le modèle de boite MS et non le modèle de boite standard. Ce que fait a priori plutôt bien Opéra, d'ailleurs. Et ce que ne semble pas faire Firefox/Mozilla.

Me trompe-je ?

Modifié par YoGi
Lien vers le commentaire
Partager sur d’autres sites

Je viens de faire un test avec un doctype correct et IE6, opera et moz utilisent bien le modèle standard.

Avec ton test IE et opéra basculent en modèle microsoft mais pas moz.

Et sans doctype idem qu'avec ton test.

Conclusion moz respecte le modèle de boite standard quelque soit le doctype.

Lien vers le commentaire
Partager sur d’autres sites

Conclusion moz respecte le modèle de boite standard quelque soit le doctype.

<{POST_SNAPBACK}>

C'est bien la conclusion à laquelle j'aboutis.

L'article d'Openweb serait donc erroné.

Lien vers le commentaire
Partager sur d’autres sites

Il n'y a pas que le modèle de boite qui concerne le mode quirk...

Mozilla bascule bien en mode quirk sur le reste (ex: taille des polices dans un table...).

Cependant, effectivement çà ne résoud pas ton problème. Il y a cependant une solution, la propriété CSS3 box-sizing, je ne sais pas si gecko l'intègre tel quel dans les dernières versions, mais il l'intègre au moins en tant que propriété propiétaire.

Essaie de rajouter :

box-sizing: border-box;

-moz-box-sizing: border-box;

à tes boites, et bonheur tu devrais avoir :)

Lien vers le commentaire
Partager sur d’autres sites

box-sizing: border-box;

-moz-box-sizing: border-box;

yep je suis tombé sur cette solution peu de temps après mon (avant) dernier message (comme quoi, on ne cherche jamais assez), et ça me satisfait complètement. merci !

Modifié par YoGi
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...