[CSS] Je haie Firefox...
26 messages
• Page 1 sur 2 • 1, 2
-

cedric_g - WRInaute accro

- Messages: 3466
- Inscription: 18 Jan 2006
[CSS] Je haie Firefox...
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 :
Et le code HTML :
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 ?...
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
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
Sous IE aucun soucis.
Une idée ?...
Dernière édition par cedric_g le Mar Nov 27, 2007 16:09, édité 1 fois.
- chtipepere
- WRInaute occasionnel

- Messages: 493
- Inscription: 8 Jan 2004
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
Peux-tu poster les 5 permières lignes de ton HTML (doctype + début du head, en conservant les sauts de lignes)?
Merci
- chtipepere
- WRInaute occasionnel

- Messages: 493
- Inscription: 8 Jan 2004
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...
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...
Dernière édition par chtipepere le Mar Nov 27, 2007 11:57, édité 1 fois.
-

cedric_g - WRInaute accro

- Messages: 3466
- Inscription: 18 Jan 2006
Merci pour ta réponse
Je suppose que c'est cela que tu veux ?
Je n'ai pas de doctype
, c'est grave ?
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
- nexxen
- WRInaute discret

- Messages: 76
- Inscription: 30 Déc 2004
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
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 - WRInaute passionné

- Messages: 2326
- Inscription: 29 Juin 2004
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.
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 - WRInaute occasionnel

- Messages: 263
- Inscription: 3 Mar 2004
Moi, je hais I.E
Très peu de soucis avec FF alors qu'avec I.E...
Très peu de soucis avec FF alors qu'avec I.E...
-

moktoipas - WRInaute passionné

- Messages: 2326
- Inscription: 29 Juin 2004
moktoipas a écrit: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 ><
Dernière édition par moktoipas le Mar Nov 27, 2007 12:42, édité 1 fois.
- Victor BRITO
- WRInaute occasionnel

- Messages: 423
- Inscription: 21 Déc 2006
cedric_g a écrit: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 - WRInaute accro

- Messages: 4146
- Inscription: 27 Déc 2004
metropoway a écrit: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 - Modérateur

- Messages: 11173
- Inscription: 5 Juin 2006
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.
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.
- Vap
- WRInaute passionné

- Messages: 1090
- Inscription: 17 Juin 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
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
- zeb
- WRInaute accro

- Messages: 3277
- Inscription: 5 Déc 2004
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
pour le décalage du contenu (en fait le centrage) je voie pas pour l'instant
.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 énergie !... </h1>
<p>
Spécialisée dans la conception de solutions industrielles <b>calorifuges</b> et d'<b>isolation</b>, la société BEGAUD et ses techniciens offrent depuis 1991 tout leur savoir-faire en la matière : installation, réparation, ré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ôlerie fine - Conduit de cheminé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ésentation de notre société</a> -
<a href="materiel-construction-calorifuge.php">Nos équipements pour la construction calorifuge</a> -
<a href="realisation-calorifuge-isolation-thermique.php">Nos dernières ré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
26 messages
• Page 1 sur 2 • 1, 2
Lectures recommandées sur ce thème :
Consultez la description détaillée des produits ou services de Google suivants : Google Speed Tracer, Google Send to Phone
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
