18041 sujets

Questions générales et questions de débutants

[Résolu] Décalage global de mon site sur FF, Safari et Chrome

ok titre modifié
Bonjour à tous et à toutes !
Voici le léger souci qui me taraude :
Pour une raison que j'ignore, Firefox (et safari, et chrome, et opera ...) ne peut pas s'empêcher de décaler vers le bas l'ensemble de mon site web. Comme s'il appliquait un margin-top de 15px au body. Sauf que je ne lui ai rien demandé, moi (enfin je crois), et que même IE6 est d'accord là-dessus.
Bref, du code et de l'image pour clarifier le tout :

body	{
margin: 0; /* pour éviter les marges */
padding: 0;
text-align: center; /* pour corriger le bug de centrage IE */
background: url(../_gui/bg_pattern.jpg) repeat;
}

h1	{
text-indent: -5000px;
margin: 0; 
line-height: 0;
}

#global	{
margin-left: auto;
margin-right: auto;
width: 1388px;
height: 602px;
text-align: left;
}

Ce qui me rend très perplexe, c'est que le souci est réglé si j'ajoute ceci avant body :
*	{
margin:0;}

Qu'est ce que ça veut dire ?? Un bug serait apparu sur firefox 3 dont je ne serais pas au courant ?? (faut dire que ça fait longtemps que je n'ai pas mis la tête dans le code). Là je me dis que c'est plutôt moi qui est sans doute négligé quelque chose ...
Une petite image pour finir :
http://www.mediaklan.com/work/wip/margin-top15px.png
Pourriez-vous m'aider s'il vous plaît ? Qu'ais-je fait de mal à Firefox ?
Merci d'avance pour votre aide, précieuse, comme d'habitude Smiley cligne
Modifié par didli (11 May 2009 - 12:23)
Peut-être que si tu nous donnais tout le code ça nous aiderait^^

C'est bizarre tout ça... ton Doctype est-il valide ?
Salut,

il faudrait effectivement vérifier que ton doctype est valide.

Pour ce qui est de ta question cela ne peut pas venir de body puisque tu remets les marges à 0... mais cela vient sans doute d'un autre élément (titre, paragraphe, etc...) dont tu n'as pas modifié les valeurs par défaut : lire Le rendu par défaut des éléments HTML.


Au passage j'ai des doutes sur les propriétés de H1 et ce qui est sur c'est que width: 1388px; c'est beaucoup trop large : on conseille de ne pas dépasser 990px pour cibler le maximum d'internautes.


Edit: pour ce qui est du titre je te confirme qu'il ne respecte pas la règle #11 du forum.
Modifié par Heyoan (09 May 2009 - 20:16)
Bonjour,

Je ne suis pas sûr d'avoir compris. Tu as testé ce rendu uniquement sur Firefox et IE6? Quid de IE7, IE8, mais aussi Safari, Opera, Chrome?

Je ne dis pas qu'il faut forcément tout tester à chaque instant, mais travailler avec au moins deux navigateurs ayant un bon rendu des CSS (il y a l'embarras du choix: Firefox 3, Safari 3-4, Chrome, Opera 9, IE 8) est un réflexe qu'il faut acquérir.

Ça permettra notamment de savoir si ce comportement est un bug de Firefox... ou un comportement normal.

(Bon en fait je connais déjà la réponse, je sais d'où vient le problème, et je sais quelle lecture indiquer. Mais on va faire durer le suspense. Smiley lol )
Déjà, merci de vos réponses rapides Smiley cligne C'est rudement plaisant !
Pour le doctype, c'est possible que le validateur le déclare valide même avec une balise oubliée par exemple ? En tout cas à mon avis mon problème pourrait effectivement trouver sa source là-dessus, alors dans le doute, DOCTYPE :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="presentation pertinente du site" />
<meta name="keywords" content="mots-cles relatifs au site et son contenu, et sa localisation" />
<title>blabla :: Accueil</title>
<link rel="stylesheet" type="text/css" href="_css/global.css" />
<!--[if IE 7]> <link rel="stylesheet" href="_css/global-ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="_css/print.css" />
<link rel="shortcut icon" href="_gui/favicon.ico" />
<link rel="icon" type="image/x-icon" href="_gui/favicon.ico" />
<link rel="icon" type="image/png" href="_gui/favicon.png" />
<script type="text/javascript"></script>
</head>
<body>
<h1>bla bla bla</h1>

Le reste du code ne devrait pas être intéressant, dans la mesure où, présent ou absent, le résultat est le même.
Je ne doute pas trop de mon h1. Maintenant, avec ou sans, même souci encore une fois.
Oui pour la taille de 990px (même si je trouve que c'est vraiment sous-estimer la vente des écrans LCD aujourd'hui), mais de toutes façons, je fais un site selon différentes tailles, justement (notez que j'ai le même souci quel que soit la taille des images bien sûr).
Encore merci de votre aide en tout cas !
Vous voyez quelque chose ?

@Florent V. : Oui bien sûr je sais qu'il faut tester sur plusieurs navigateurs. J'ai un petit script cmd pour windows qui me les lance tous d'un coup.
Ah ! Tous les autres navigateurs (chrome, safari, opera) ont le même souci. Bon au moins ça me rassure, j'ai bien fait une bourde Smiley smile )
Pitié Florent V., épargne-moi ... Smiley edit Modifié par didli (09 May 2009 - 21:00)[/edit]
Bon, alors sans voir la page ou le code complet c'est un peu hasardeux, mais je suis sûr à 99% que c'est une simple histoire de fusion de marges.

Ce qui serait super cool, c'est s'il y avait un article sur la fusion des marges sur Alsacréations. Et, qui sait, c'est peut-être même le cas!
Florent V. a écrit :
Et, qui sait, c'est peut-être même le cas!

ha ha ha, excellent ça ! Et félicitations, by the way, c'est un article fort interessant !
Après avoir lu (et relu), je me dis qu'effectivement c'est probable. Mais je ne parviens pas, néanmoins, à trouver exactement où se situe alors la fusion. Je comprendrais si j'avais quelque part un margin-top, mais j'en ai pas. Du coup, le code complet (modifié entre temps mais bon) pour mieux vous situer :
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="presentation pertinente du site" />
<meta name="keywords" content="mots-cles relatifs au site et son contenu, et sa localisation" />
<title>bla bla :: Accueil</title>
<link rel="stylesheet" type="text/css" href="_css/global.css" />
<!--[if IE 7]> <link rel="stylesheet" href="_css/global-ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="_css/print.css" />
<link rel="shortcut icon" href="_gui/favicon.ico" />
<link rel="icon" type="image/x-icon" href="_gui/favicon.ico" />
<link rel="icon" type="image/png" href="_gui/favicon.png" />
<script type="text/javascript"></script>
</head>
<body>
<h1>bla bla, Vente et installation de bla bla</h1>
<div id="global">
<!-- Colonne du logo et des Casseroles -->
<div id="blocgauche">
<p>Bloc gauche</p>
<p>largeur fixe : ? px</p>
</div>
<!-- Colonne des Couverts en bois -->
<div id="blocdroit">
<p>Bloc droit</p>
<p>largeur fixe : ? px</p>
</div>
<!-- Colonne du Contenu et Menu -->
<div id="blocnotes">
<ul id="navhoriz">
<li><a href="#">Cusines</a></li>
<li><a href="#">Salle de Bains</a></li>
<li><a href="#">Electroménager</a></li>
<li><a href="#">Eviers et Robinets</a></li>
<li><a href="#">Accessoires</a></li>
</ul>
</div>
<!-- Colonne du Compte -->
<div id="compte">Pied de Page et Mentions</div>
</div>
</body>
</html>

CSS
/* CSS Document */
body	{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 0; /* pour éviter les marges */
padding: 0;
text-align: center; /* pour corriger le bug de centrage IE */
background: url(../_gui/bg_pattern.jpg) repeat;
}

h1	{
text-indent: -5000px;
margin: 0; 
line-height: 0;
}

#global	{
margin: 0 auto;
width: 1388px;
height: 602px;
text-align: left;
}

#global p {
margin: 0;
}
    
#blocgauche {
float: left;
width: 245px;
background-color: #707070;
color: white;
}

#blocdroit {
float: right;
width: 245px;
background-color: #7F7F7F;
color: white;
}

#blocnotes  {
margin-left: 245px;
margin-right: 245px;
height: 602px;
background-image: url(../_gui/bg_blocnotes.jpg);
}

#compte {
clear: both;
width: 1388px;
background-color: black;
margin: 0;
}

Voilà ! Il y a quelques éléments encore inactifs ou non rédigés, soyez indulgent s'il vous plaît !
En tout cas, merci infiniment de votre aide Smiley smile
PS : je mettrais le titre du topic à jour dès que je pourrais mettre un nom sur le souci, pour que tout le monde s'y retrouve.
Arf ! Je crois que je commence à piger !
La propriété overflow:hidden; appliqué à mon conteneur global résout le souci. Et si c'est le cas, je pense que c'est à cause de mon pied de page sous les flottants. La hauteur que j'ai indiqué à mon div#global n'inclut pas la hauteur de ce pied de page.
Avec overflow:hidden; le pied de page disparaît, normal puisque, je cite :
a écrit :
Cette solution est intéressante, mais a d’autres conséquences (empêche le dépassement des flottants, peut cacher les contenus qui dépassent ou faire apparaitre des barres de défilement). À utiliser avec prudence.

Mais je pense que je vais régler cela sans soucis (enfin j'espère). Je teste tout ça demain et passerai en résolu si tout passe.
Modifié par didli (10 May 2009 - 03:45)
Salut,
a écrit :
Arf ! Je crois que je commence à piger ! La propriété overflow:hidden;
Non, fausse route. Smiley smile
a écrit :
le souci est réglé si j'ajoute ceci avant body : * {margin:0;}
Rien qu'avec ça, tu peux être certain que ton problème tient à une marge par défaut non réinitialisée. Il te suffit juste de chercher sur quel élément.

Un coup de Firebug et tu te rendras vite compte que ta ul#navhoriz a quelque chose à cacher Smiley cligne
Florent V. a écrit :
Bonjour,

Je ne suis pas sûr d'avoir compris. Tu as testé ce rendu uniquement sur Firefox et IE6? Quid de IE7, IE8, mais aussi Safari, Opera, Chrome?



Salut l'Ami,

A ce sujet la, ce qui m'énerves profondément, ce sont les énormes disparitées des javascript, ors, tout ces moteurs ont leur javascript et ça cafouille lorsque teste en y regardant de trés pré, car c'est la partie commune des dll etc ... du dernier javascript installé qui agit ! quelle est ton expérience a ce sujet Smiley eek
Modifié par FoxLeRenard (10 May 2009 - 09:34)
Hello,

@didli > quand je te disais que ton titre ne respectait pas la règle 11, c'était une façon polie de t'inviter à en changer pour quelque chose de plus évocateur. Smiley cligne

@FoxLeRenard > comme je te le disais récemment un sujet n'est pas un lieu pour papoter de tout et de rien (en l'occurrence ta remarque n'a vraiment rien à voir). Si une question te taraude n'hésites pas à ouvrir ton propre sujet. Smiley smile
Tout à fait d'accord Heyoan, je tiens à changer le titre et respecter les règles du forum (qu'au passage j'apprécie toujours autant), mais j'appelle ça comment ?
Décalage des marges ? Souci de décalage global du site ?
Bon allez je prends le dernier. Hop.
'Faut que j'aille tester les suggestions de mes confrères un peu plus haut aussi dans la foulée.
Je pense que je vais passer en [Résolu] !
Après avoir testé firebug (génialissime cette extension) comme suggéré par marcv, et noté que le souci concernait effectivement mon menu ul#navhoriz, j'ai réinitialisé ce dernier au niveau de ses marges comme suit :
ol, ul  {
list-style:none;
[b]margin-top: 0;[/b]
}

J'en conclus qu'une liste non ordonnée n'a pas ses marges interprêtées de la même manière selon le navigateur.
Ce qui me rend dingue, c'est que j'avais testé en enlevant le menu, puis oublié de rafraîchir ma page, et conclu alors que ça ne pouvait pas venir de là ! C'est comme si je passais plusieurs fois à côté d'un gros monstre baveux et que je feignais de ne pas le voir.
Bref, un grand merci (et je pèse mes mots) à toutes les personnes présentes ici !
Smiley smile
Modifié par didli (11 May 2009 - 11:37)
didli a écrit :
J'en conclus qu'une liste non ordonnée n'a pas ses marges interprêtées de la même manière selon le navigateur.

Hmm... ici je dirais plutôt que dans tous les navigateurs tu auras, pour ton UL, un margin-top par défaut (de 1em dans tous les cas, il me semble). Donc la disparité n'est pas à ce niveau.

La disparité serait plutôt au niveau de l'application de la fusion des marges (et je dis ça d'expérience, car sans tester la page c'est difficile d'être catégorique): l'article que tu as lu précise que sous Internet Explorer (versions 6-7, pas 8), dans certains cas la fusion des marges ne se produit pas ou est bloquées. C'est le sujet de la dernière partie de l'article.
Sujet clos
Aller à