[CSS] Je haie Firefox...

[cedric_g]

Bonjour


Je rencontre un problème avec FF (v2.0.0.10) que je ne rencontre jamais avec IE (qui lui fonctionne de manière "logique", en tout cas pour moi ) avec les alignements dans les DIV.


Exemple ici => -http://www.c@l0rifuge-beg@ud.fr

(message édité : Google est impressionnant... et WRI effrayant )


Le code CSS :

Code: Tout sélectionner

/* Définition du style définissant l'encadrement du contenu    */

.begaud-box {
   witdh:750px;
   margin:0;
}

.begaud-entete {
   width:750px;
   margin:0;
   padding:0;
   background: url(fond_01.gif) no-repeat top left;
}

.begaud-content {
   width:750px;
   margin:0;
   padding:0;
   text-align:center;
   background: url(fond_02.gif) repeat-y top left;
}

.begaud-contenu {
   width:660px;
   position:relative;
   clear:both;
   display:block;
   text-align:justify;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}

.begaud-bas {
   width:750px;
   background: url(fond_03.gif) no-repeat top left;
   margin:0;
   padding:0;
}


Et le code HTML :

Code: Tout sélectionner

<div align="center">

  <div class="begaud-box">

    <div class="begaud-entete"><img src="images/is_single_pixel.gif" height="46" width="1"></div>

    <div class="begaud-content">
      <div class="begaud-contenu">

        <!-- HAUT DE ZONE DE CONTENU -->
        ici mon contenu
        <!-- BAS DE ZONE DE CONTENU -->

      </div>
    </div>

    <div class="begaud-bas"><img src="images/is_single_pixel.gif" height="54" width="1"></div>

  </div>
</div>

Je n'arrive PAS à aligner correctement mon contenu, ça commence à me gonfler grave

Et je ne vois pas où est le problème ; il y a aussi un soucis par rapport au décalage entre les DIV d'entête et de bas d'encadrement, qui sont une fois bien affichés, une fois pas

Sous IE aucun soucis.


Une idée ?...

[chtipepere]

Quelle doctype utilise-tu?
Peux-tu poster les 5 permières lignes de ton HTML (doctype + début du head, en conservant les sauts de lignes)?
Merci

[chtipepere]

Je n'étais pas allé voir le site.
Pour répondre à ta question, je dirais que Firefox se comporte tout à fait normalement, et que IE fonctionne en quirks mode, il ne respecte donc pas correctement les propriétés CSS.
Moi je dirai : passe en DOCTYPE strict, et ajuste ensuite les décalages.
Enfin, ce n'est que mon avis...

[cedric_g]

Merci pour ta réponse


Je suppose que c'est cela que tu veux ?

Code: Tout sélectionner

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="begaud.css" rel="stylesheet" type="text/css">

Je n'ai pas de doctype , c'est grave ?

[nexxen]

Essaye de donner une valeur nulle aux marges de ton H1 et du paragraphe en pied de page, ça devrait résoudre le pb.

Et pour rejoindre chtipepere, utilise un doctype valide, ne mélange pas HTML et XHTML et abandonne les balises et attributs obsolètes du style <div align="center">...FF et toi se sera pour la vie

[moktoipas]

je vois qu'il y a des spacer gif dans donc code, ca sert a rien, puisque c'est pour "spacer" des div alors que tu peux faire "height".


position:relative;
clear:both;
display:block;

ces troi ligne la servnet a rien (la prmeiere c'est la valeur par defaut pour les div), la second ne sert que si tu as qqch en float, la troisieme c'est aussi par defaut.

[metropoway]

Moi, je hais I.E
Très peu de soucis avec FF alors qu'avec I.E...

[moktoipas]

je vois qu'il y a des spacer gif dans donc code, ca sert a rien, puisque c'est pour "spacer" des div alors que tu peux faire "height" en css.


position:relative;
clear:both;
display:block;

ces troi ligne la servnet a rien (la prmeiere c'est la valeur par defaut pour les div), la second ne sert que si tu as qqch en float, la troisieme c'est aussi par defaut.

edit
je viens de me rendre compte de ce message qui n'a pas de sens et ne sert a rien et en plus je me souvient pas l'avoir fait ><

[Victor BRITO]

Merci pour ta réponse


Je suppose que c'est cela que tu veux ?

Code: Tout sélectionner

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="begaud.css" rel="stylesheet" type="text/css">

Je n'ai pas de doctype , c'est grave ?

Ce n'est pas de ça qu'il s'agit : il s'agit d'une ligne de code commençant par "<!DOCTYPE".

Ce doctype varie selon la version de HTML ou de XHTML que tu utilises.

HTML 4.01 Strict

Code: Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitionnel

Code: Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Code: Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitionnel

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Il est important de déclarer ce code, puisqu'il permet au navigateur de savoir comment interpréter le document. Et pour les CSS, une doctype correctement déclarée est un gage d'une bonne interprétation des standards.

Le mode "Quirks" se déclenche sous Internet Explorer dans les cas suivants :
- doctype incomplet ou incorrect,
- absence de doctype,
- doctype correspondant à HTML 2 ou 3.2,
- utilisation d'un prologue XML (sauf avec IE 7).
Et, pour tous les cas nommés ci-avant (sauf pour le dernier), Firefox, dans la bulle "informations sur la page", indique pour le mode de rendu "mode de compatibilité" au lieu de "mode de respect strict des standards".

Et quand tu as le mode "Quirks" déclenché, le modèle de boîte change et fait chambouler les dimensions des blocs lorsque tu définis une largeur, une bordure et des marges internes (padding) en même temps.

Quelques lectures utiles : choix de la DTD, doctype switching, pourquoi un doctype.

[bproductiv]

Moi, je hais I.E
Très peu de soucis avec FF alors qu'avec I.E...

IDEM quand ca marche pas avec FF c'est que le codehest mauvais
Commence par le doctype comme dit plus haut car en mode quirk c'est sûr que tu n'aura ce résultat QUE sous IE.
Tu as testé avec opéra ?

[Marie-Aude]

Ton code est chargé.

Metre un div dans un blocquote dans un div c'est beaucoup...

Tu peux en gérant correctement tes paddings et tes margins avoiruniquement ton div central, avec ton h1, tes p, ton blockquote et ton image sur la droite, comme élément de page au lieu d'élément de background. Ca permet aussi de réserver la part de ton image normalement avec un simple float et des propriété de marge et de padding sur l'img, au lieu de faire ce que tu fais.

[cedric_g]

Pfiiiouu ça c'est de la réponse


Bon, je crois qu'il est temps que j'apprenne à quoi servent les doctypes

Je vais mettre en application tous vos conseils, MERCI !

[Vap]

Je crois que le probléme d'alignement vertical vient des images. Dans ton en tete tu as une image is-single_pixel.gif En IE6, une div a au moins les dimensions des éléments qu'elle contient.

Ceci n'est pas le cas dans le standard du W3C.

Donc il faut que tu vire ton image gif et que tu utilise height à la place, comme dit plus haut.

Vap

[Olivier Duval]

--> http://www.c@l0rifuge-beg@ud.fr <--

Si ça, ce n'est pas de la paranoia qu'est ce que c'est...

[zeb]

quelques erreurs de syntaxe dans le CSS:

.begaud-box {
width:750px;
margin:0;
}

met une <br/> avant ta h1 et après ton paragraphe pour 'encadrer' le contenu de la div begaud-contenu le problème de 'déconnection' des fond va disparaître

Code: Tout sélectionner

    <!-- HAUT DE ZONE DE CONTENU -->
    <div class="begaud-content">
     <div class="begaud-contenu">
      <br/>
      <h1>Optimisez votre &eacute;nergie !... </h1>
      <p>
       Sp&eacute;cialis&eacute;e dans la conception de solutions industrielles <b>calorifuges</b> et d'<b>isolation</b>, la soci&eacute;t&eacute; BEGAUD et ses techniciens offrent depuis 1991 tout leur savoir-faire en la mati&egrave;re : installation, r&eacute;paration, r&eacute;novation, partout en France et en Europe. <br />
      </p>
      <table>
       <tr>
        <td>
          <div style="margin-left:-35px;">
           <blockquote>
            <div>
              Calorifuges - Isolations thermique et phonique industrielles - Plafonds suspendus - T&ocirc;lerie fine - Conduit de chemin&eacute;e
            </div>
           </blockquote>
          </div>
        </td>
       <td>
        <img src="http://www.calorifuge-begaud.fr/images/realisation-calorifuge.jpg">
       </td>
      </tr>
     </table>
     <p>
      <a href="entreprise-installation-calorifuge.php">Pr&eacute;sentation de notre soci&eacute;t&eacute;</a> -
      <a href="materiel-construction-calorifuge.php">Nos &eacute;quipements pour la construction calorifuge</a> -
      <a href="realisation-calorifuge-isolation-thermique.php">Nos derni&egrave;res r&eacute;alisations calorifuges</a>
     </p>
     <br/>
     </div><!-- fin div begaud-contenu -->
    </div><!-- fin div begaud-content -->
    <!-- BAS DE ZONE DE CONTENU -->

pour le décalage du contenu (en fait le centrage) je voie pas pour l'instant