[CSS] Je haie Firefox...

cedric_g · 27 Novembre 2007

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 :twisted: ) avec les alignements dans les DIV.

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

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

Le code CSS :

Code:

/* 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:

<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 :evil:

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 · 27 Novembre 2007

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 · 27 Novembre 2007

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 · 27 Novembre 2007

Merci pour ta réponse

Je suppose que c'est cela que tu veux ?

Code:

<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 · 27 Novembre 2007

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 · 27 Novembre 2007

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 · 27 Novembre 2007

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

moktoipas · 27 Novembre 2007

moktoipas a dit:
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 · 27 Novembre 2007

cedric_g a dit:
Merci pour ta réponse

Je suppose que c'est cela que tu veux ?

Code:

<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:

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

HTML 4.01 Transitionnel

Code:

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

HTML 4.01 Frameset

Code:

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

XHTML 1.0 Strict

Code:

<!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:

<!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:

<!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 · 27 Novembre 2007

metropoway a dit:
Moi, je hais I.E :evil:
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 · 27 Novembre 2007

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 · 27 Novembre 2007

Pfiiiouu ça c'est de la réponse 8O

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

:lol:

Je vais mettre en application tous vos conseils, MERCI !

Vap · 27 Novembre 2007

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 · 27 Novembre 2007

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

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

zeb · 27 Novembre 2007

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:

    <!-- 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

zeb · 27 Novembre 2007

j'oubliais, j'ai un peut épuré ton CSS et l'important est la :

Code:

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

.begaud-box {
	width:750px;
}

.begaud-entete {
	width:750px;
	height: 46px;
	background: url(http://www.calorifuge-begaud.fr/fond_01.gif) no-repeat top left;
}

.begaud-content {
	width: 750px;
	text-align: center;
	background-image: url(http://www.calorifuge-begaud.fr/fond_02.gif);
	background-repeat: repeat-y;
	background-position: top left;
}

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

.begaud-bas {
	width:750px;
	height: 54px;
	background: url(http://www.calorifuge-begaud.fr/fond_03.gif) no-repeat top left;
}

bproductiv · 27 Novembre 2007

zeb a dit:
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

Cette pratique n'est pas recommandée, beaucoup de techniques existent pour ne pas recourir à des ajouts de balises inutiles.
Voir sur le site d'eric meyer et autre gourous du css

zeb · 27 Novembre 2007

bproductiv a dit:
zeb a dit:

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

Cliquez pour agrandir...

Cette pratique n'est pas recommandée, beaucoup de techniques existent pour ne pas recourir à des ajouts de balises inutiles.
Voir sur le site d'eric meyer et autre gourous du css

pas recommandée pourquoi ? 2 x 5 octets plus les CR ? une ligne de plus en visuel dans le navigateur ?

moktoipas · 27 Novembre 2007

pasqu'elle n'a aucune justification sémantique.

fair un br pour arranger un bug visuel, c'est ce qui conduit a avoir un code pourri et sur lequel on ne peut plus revenir.

bproductiv · 27 Novembre 2007

pour un meilleure séparation contenu / graphisme.
Pas d'ajout de balise superflux.Un code sémantique doit le rester, après si il ne l'est pas, alors faut pas se priver.

Victor BRITO · 27 Novembre 2007

moktoipas a dit:
fair un br pour arranger un bug visuel, c'est ce qui conduit a avoir un code pourri et sur lequel on ne peut plus revenir.

+1

zeb · 27 Novembre 2007

moktoipas a dit:
pasqu'elle n'a aucune justification sémantique.

fair un br pour arranger un bug visuel, c'est ce qui conduit a avoir un code pourri et sur lequel on ne peut plus revenir.

code pourri tu y va un peut fort surtout pour 2 pauvres BR qui aide a passer partout (IE et FF)

Code:

<div style="width:10px;float:left;" >&nbsp;</div>

<div style="width:10px;float:left;" >&nbsp;</div>
<div class="barre" onmouseout="Aid('');this.style.marginTop='0px';" onmouseover="Aid('Faire une citation')" onclick="insertion('[QUO]','[/QUO]');" onmouseup="this.style.marginTop='0px';" onmousedown="this.style.marginTop='1px';" >Citation</div>
<div style="width:10px;float:left;" >&nbsp;</div>
<!--
<div class="barre" onmouseout="Aid('');this.style.marginTop='0px';" onmouseover="Aid('Afficher un block à droite (Mettez un block, une image dedans, un saut de ligne et une legende fermez le block puis tappez le reste de votre commentaire).')" onclick="insertion('[BLO]','[/BLO]');" onmouseup="this.style.marginTop='0px';" onmousedown="this.style.marginTop='1px';" >Block</div>
<div class="barre" onmouseout="Aid('');this.style.marginTop='0px';" onmouseover="Aid('Le texte entre cette balise ne sera pas corrigé par le correcteur anti SMS.')" onclick="insertion('[NO]','[/NO]');" onmouseup="this.style.marginTop='0px';" onmousedown="this.style.marginTop='1px';" >NoVérif</div>-->


<script type="text/javascript">
function Aid(txt)
{
if (txt=='') {document.getElementById("aide").style.display='none';} else {document.getElementById("aide").style.display='block';}
document.getElementById("aide").innerHTML= txt;
}
</script></div>


<script type="text/javascript">
Array.prototype.inArray = function (value)
// Returns true if the passed value is found in the
// array.  Returns false if it is not.
{
    var i;
    for (i=0; i < this.length; i++) {
        // Matches identical (===), not just similar (==).
        if (this[i] === value) {
            return true;
        }
    }
    return false;
}

function spam(obj)
{



var spam = new Array();

spam[0]="watches";spam[1]="casino";spam[2]="@moktoipas.com";spam[3]="subject:";
spam[0]="watches";
text=obj.value.toLowerCase();


var temp = new Array();
temp = text.split(' ');
var message="";
for (x in temp)
{
if (spam.inArray(temp[x])) {message+="Votre message ne peut pas contenir '"+temp[x]+"'.<br>";}
}

document.getElementById('erreurspam').innerHTML=message;





}
</script>

ça c'est un code pourri, melange de l'applicatif et de la présentation, style dans le HTML, pas de tabulation etc ... si tu regarde sa page, tu verra que c'est loins d'être le même exemple, c'est d'ailleurs pour cela que j'ai pris le temps de répondre

zeb · 27 Novembre 2007

bproductiv a dit:
pour un meilleure séparation contenu / graphisme.
Pas d'ajout de balise superflux.Un code sémantique doit le rester, après si il ne l'est pas, alors faut pas se priver.

moi perso je suis assez OK avec cela et c'est aussi ce que j'essaie de faire mais en chargeant sa page tu te rend compte qu'il y a déjà pas mal de truc qui sont pas XHTML, ensuite c'est pas full CSS donc ...

tien ça me donne une idée...

zeb · 27 Novembre 2007

bon parce que le problème m'a tiraillé les pauvre neurones qu'il me reste une solution sans BR avec une approximation sur le centrage du contenu (j'arrive pas a comprendre pourquoi mes truc habituels ne passe pas sur ce code)

ici : -http://www.agir19.free.fr/www.calorifuge-begaud.fr.html

cedric_g · 27 Novembre 2007

8O

Vous êtes des malades. Mais bon sang, je vous aime (en toute amitié hein :mrgreen

Si vous avez besoin de moi pour "mes" domaines de compétences (photo numérique, analyse décisionnelle, chats de race...), je suis tout ouïe (je sais, c'est étrange comme domaines) !

cedric_g · 28 Novembre 2007

Up !

Encore pour vous remercier puisque tout est quasi rentré dans l'ordre. Subsiste une légère différence de marge dans Firefox (le contenu est très légèrement décalé à gauche par rapport à IE qui lui affiche nickel... J'ai le même soucis à priori dans mon blog, je n'ai jamais compris d'où ça venait)

J'ai aussi un petit soucis d'affichage des galeries (page "réalisations") mais je devrais pouvoir résoudre ça tout seul :wink:

Encore MERCI !