YoGi Posté 9 Décembre 2004 Posté 9 Décembre 2004 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) : Tout me laisse croire que les rendus d'Opera et d'IE sont corrects (car ils sont ceux que j'attends ). 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.
GloubI Posté 9 Décembre 2004 Posté 9 Décembre 2004 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
Sylvain Trovalet Posté 9 Décembre 2004 Posté 9 Décembre 2004 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 ??
YoGi Posté 10 Décembre 2004 Auteur Posté 10 Décembre 2004 (modifié) 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é 10 Décembre 2004 par YoGi
Sylvain Trovalet Posté 10 Décembre 2004 Posté 10 Décembre 2004 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.
YoGi Posté 10 Décembre 2004 Auteur Posté 10 Décembre 2004 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é.
martin© Posté 10 Décembre 2004 Posté 10 Décembre 2004 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
YoGi Posté 10 Décembre 2004 Auteur Posté 10 Décembre 2004 (modifié) 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é 10 Décembre 2004 par YoGi
Xavier Posté 10 Décembre 2004 Posté 10 Décembre 2004 J'arrive un peu tard, mais... est-ce que ce ne serait pas le mode "almost standards" introduit par Mozilla ?
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant