Jump to content
Sign in to follow this  
YoGi

Gecko et Quirksmode

Rate this topic

Recommended Posts

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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 ??

Share this post


Link to post
Share on other 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 ?

Edited by YoGi

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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é.

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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 !

Edited by YoGi

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...