28172 sujets

CSS et mise en forme, CSS3

Gestion du CSS de Firefox3 différente de Firefox2 !!!???

Quelqu'un aurait-il des infos sur comment firefox 3 gère le CSS par rapport à firefox 2 ??

Essayant d'installer Joomla je suis tombé sur ce tutorial pour créer un template SIMPLE
http://joomla.cocoate.com/fr/Creation-d-un-template-Joomla

Code du fichier php

<html>
<head>
<link href="/joomla150/templates/livrejoomla150/css/template.css"
 rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Partie1">Zone d’en-tete / header<br /><br />
<div id="Section1">Section1</div>
<div id="Section2">Section2</div>
</div>
<div id="Partie2">Zone principale / main<br /><br />
<div id="Section3">Breadcrumbs</div>
<div id="Section6">Colonne droite</div>
<div id="Section4">Colonne gauche</div>
<div id="Section5">Contenu</div>
</div>
<div id="Partie3">Pied de page /footer<br /><br />
<div id="Section7">Section7</div>
</div>
</body></html>

code du fichier css

body{
   font-size: 12px;
   font-family: Helvetica,Arial,sans-serif; }
   #Partie1{ /* header */
   float: left;
   border: 2px dotted green; }
#Partie2{ /* main */
   float: left;
   border: 2px dotted yellow; }
#Partie3{ /* Pied */
   clear:all;
   border: 2px dotted red; }
#Section1{ /* A droite en haut */
   float: left; width: 18em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; background-color: #eee; }
#Section2{ /* A gauche en haut */
   float: right; width: 12em;
   margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; }
#Section3{ /* Breadcrumbs */
   border: 1px dashed silver;
   background-color: #eee; }
#Section4{ /* Colonne gauche */
   float: left; width: 15em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; }
#Section5{ /* Contenu */
   margin: 0 12em 1em 16em;
   padding: 0 1em;
   border: 1px dashed silver; }
#Section6{ /* Colonne droite */
   float: right; width: 12em;
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }
#Section7{ /* Pied */
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }

affichage sur IE et FF2
http://farm3.static.flickr.com/2055/2443256197_b5f79b007c.jpg?v=0

affichage sur FF3
http://i63.servimg.com/u/f63/12/43/29/77/prif10.gif

Et c'est là que je me suis rendu compte que tous les problèmes que j'avais depuis un certain temps étaient dus à la gestion des css par firefox 3 !!

Déjà que c'est difficile de prôner le passage à firefox à un féru d'IE si après pour adapter un site on doit s'adapter en fonction de la version de firefox...

Enfin passé la colère, si quelqu'un a des informations sur comment faire en sorte que ce code soit bien interprété ou sur la gestion du css par firefox 3 je suis preneur.
Il y a assez peu d'améliorations du support de CSS entre les versions 2 et 3 de Firefox, même si on en compte quelques-unes relativement importantes (display:inline-block, les couleurs RGBA ou encore font-size-adjust). Il n'y a à priori pas de régression, sauf peut-être sur quelques bugs très précis; rien de notable en tout cas.

Pour la page sur laquelle tu travailles, il te manque quelque chose d'essentiel: un Doctype. Il faut toujours travailler en mode Standard (avec un Doctype en bonne et due forme) et surtout pas en mode Quirks (sans Doctype ou avec un Doctype tronqué).

Lire à ce sujet:
http://css.alsacreations.com/Tutoriels-et-articles-divers/A-propos-du-Modele-de-boite-Microsoft-ou-quirks
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir
Merci pour le doctype. Ce n'était pas l'objectif mais c'est toujours bon d'en savoir plus.

Pour mon problème en fait, vu sur un autre forum, apapremment FF3 gère différemment les float que FF2. Donc il faut enlever les float des parties puis pour cadrer les float des sections en leur opposant un <div style="clear:both></div>

ce qui donne un code php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Nouveau site PRIF</title>

<link href="/joomla150/templates/prif/css/template.css" rel="stylesheet" type="text/css">
<jdoc:include type="head">
</jdoc:include></head><body>

<div id="Partie1">Zone d’en-tete / header<br><br>
<div id="Section1">Section1</div>
<div id="Section2">Section2</div>
<div id="Clear1"></div>
</div>
<div id="Partie2">Zone principale / main<br><br>
<div id="Section3">Breadcrumbs</div>
<div id="Section6">Colonne droite</div>
<div id="Section4">Colonne gauche</div>
<div id="Section5">Contenu</div>
<div id="Clear1"></div>
</div>
<div id="Partie3">Pied de page /footer<br><br>
<div id="Section7">Section7</div>
</div>
</body></html>


et un code CSS

body{
   font-size: 12px;
   font-family: Helvetica,Arial,sans-serif; }
#Partie1{ /* header */
   border: 2px dotted green; }
#Partie2{ /* main */
   border: 2px dotted yellow; }
#Partie3{ /* Pied */
   border: 2px dotted red; }
#Clear1{ /* Saut image pour contrer le float */
   clear:both; }
#Section1{ /* A droite en haut */
   float: left; width: 18em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; background-color: #eee; }
#Section2{ /* A gauche en haut */
   float: right; width: 12em;
   margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; }
#Section3{ /* Breadcrumbs */
   border: 1px dashed silver;
   background-color: #eee; }
#Section4{ /* Colonne gauche */
   float: left; width: 15em;
   margin: 0 0 1.2em;
   border: 1px dashed silver; }
#Section5{ /* Contenu */
   margin: 0 12em 1em 16em;
   padding: 0 1em;
   border: 1px dashed silver; }
#Section6{ /* Colonne droite */
   float: right; width: 12em;
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }
#Section7{ /* Pied */
   margin: 0 0 1.1em;
   background-color: #eee; border: 1px dashed silver; }


ça fait un peu bricolage mais bon...
Moui, j'avoue ne pas savoir si c'est une bonne idée, un bricolage infâme ou un correctif raisonnable. Cette structure HTML est pénible à déchiffrer, de même que le code CSS, car: le code HTML n'est pas indenté, et les identifiants choisis ne permettent pas de visualiser la structure.

Mais dans l'ensemble je crois que le modèle utilisé est un peu mal foutu. Il n'a pas l'air de gérer la question du dépassement des flottants, pourtant essentielle si justement on exploite les flottants de manière massive pour la mise en page.
Sujet clos
Aller à