IE/FF un décalage mais pas au même endroit !

Bonjour à tous,

Je développe un nouveau template en CSS et je me confronte à un soucis avec un espace blanc qui apparait à différents endroits selon le navigateur !

Sur IE, le décalage est entre mon menu et mon image juste en dessous!

http://img339.imageshack.us/img339/264/pbiemi5.jpg

Sur FF, le décalage est entre ma bannière et mon menu !

http://img75.imageshack.us/img75/9955/pbffcf1.jpg

Comme vous pouvez le voir, je vous ai mis des liens pour des screenshots car je travaille en local

En ce qui concerne le code et la css, je vous mets les extraits concernés et où j ene vois pas où est le problème...

CSS

#container {
	width: 740px;
	margin: 0;
	text-align: left;
	padding: 0px;
	}
	
#header-wrap {
	margin: 0px;
	padding: 0px;
	}
		
#header-in {
	padding: 0px;
	margin: 0 auto;
	background: url('../img/ban.jpg') no-repeat center bottom;
	height: 150px;
	width: 740px;
	clear: both;

	}
			
#menu	{
	
	height:26px;
	font-size:11px;
	font-weight:bold;
	background:transparent url(../img/bgOFF.gif) repeat-x top center;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	margin: 0 auto;
	padding: 0px;
	width:740px;
			}
	
#sous_header {
	background: url(../img/sous_header.jpg) no-repeat center bottom ;
	padding: 0px;
	height: 48px;
	width: 740px;
	margin: 0 auto;

	}

TEMPLATE

<div id="container">
	
	<div id="header-in">
	</div>

	<div id="menu">
		<ul>
		<li><a href="http://www.roycod.com/" title="Accueil" >Accueil</a></li>
		<li><a href="http://www.roycod.com/index.php/2006/03/26/320-a-propos" title="A propos" >A propos</a></li>
		<li><a href="http://www.roycod.com/index.php/2006/11/17/282-stick-attack" title="Stickers">Stickers</a></li>
		<li><a href="http://www.taste-it.fr/" title="Allez sur Taste-it" target="_blank">Taste-it</a></li>
		<li><a href="http://www.livefromcph.com/" title="Live from CPH" target="_blank">Live from CPH</a></li>
		<li><a href="http://www.roycod.com/index.php/2006/03/26/321-contacts" title="Contact">Contact</a>	</li>
	</ul>

            </div>
	
			<div id="sous_header">
			</div>
......
</div>

Ce que je trouve étrange c'est que d'habitude un seul des deux navigateurs a un décalage ou alors les deux au même endroit alors que là, c'est deux endroits différents !

J'espère bien avoir expliqué mon soucis ,

Roy
Modifié par roy (04 Mar 2007 - 19:46)

Bonjour,

Ça n'est pas le sujet, mais je constate que ton header est vide, c'est à dire dépourvu de toute information. C'est regrettable, aussi bien pour tes utilisateurs (information manquante) que pour la visibilité de ton site (moteurs de recherche).

Autre remarque :

#menu {
	margin: 0 auto;
	width:740px;
}

div#menu appartient déjà au bloc div#container, qui a une largeur de 740px. Les éléments de type bloc non flottants et non positionnés en absolu prenant par défaut toute la largeur disponible dans leur bloc parent, il est inutile de re-préciser width: 740px. De même, les marges automatiques sont inutiles (on ne va pas centrer horizontalement un bloc de 740px dans un conteneur de 740px, tout de même ?).
Ça vaut aussi pour div#header-in, et peut-être pour d'autres.

Pour revenir à ton problème, il s'agit peut-être (probablement ?) d'un problème de fusion des marges. Difficile à dire sans avoir le détail du code et sans pouvoir tester en direct.

À propos de la fusion des marges : Blocs imbriqués et fusion des marges.

Merci pour les conseils d'optimisation du code CSS, c'est vrai que j'ai mis plusieurs informations redondantes !

Pour la fusion des marges, cela concernerait toutes mes <div>?

a écrit :
Difficile à dire sans avoir le détail du code et sans pouvoir tester en direct.

Veux-tu que je mette tout le fichier css et php en lien sur le net ou sur le forum?

Étant flemmard de nature, je n'accepterai de me pencher que sur le code d'une page fonctionnelle en ligne.

Héhé

Je t'ai mis ça sur un vieux ftp

Ne pas tenir compte du corps du texte car rien n'est fait dans la CSS (là c'est moche, c'est rien de le dire )

Css complète : ici
Modifié par roy (04 Mar 2007 - 23:18)

Comme je le pensais, c'est bien un problème de fusion des marges. Quitte à me répéter, je redonne le lien qui va bien : Blocs imbriqués et fusion des marges.

La page dont je viens de redonner le lien me semble suffisamment claire. La fusion des marges qui pose ici problème (en supposant qu'il n'y en a qu'une) concerne l'élément ul du menu horizontal.

Les ul ont généralement une marge par défaut définie ainsi :

ul {margin: 1em 0;}

On la visualise mieux si on empêche la fusion des marges avec le bloc parent, par exemple ainsi :

#stylefive {padding: 1px 0;}

Une fois le problème constaté, on peut le régler ainsi :

#stylefive ul {margin: 0;}

Pas testé avec IE, mais ça devrait faire l'affaire.

Sinon, un petit conseil :

body {margin: 0; padding: 0;}

Plutôt que simplement

body {padding: 0;}

Les différents navigateurs utilisent soit margin soit padding pour le retrait par défaut qui empêche le texte de coller aux bords de la fenêtre du navigateur. Dans le cas de Firefox, c'est un margin (de 8px, par défaut).

Autre remarque en passant : éviter les images de 1px de large (ou de haut) répétées sur une grande distance en largeur (ou en hauteur). Ça pompe des ressources du navigateur quand il faut répéter mille fois la même image. Préférer une image de 10, 20, 50px de large, en PNG par exemple.

Merci des conseils, je vais tester ça dès que j'ai une minute !

Pour l'image de 1px, j'avais lu le contraire sur un site anglais, je vais donc faire comme tu m'as dit, si cela peut se charger plus vite, c'est pas plus mal...

Y'a tant d'optimisation à faire pour que ça soit parfait qu'on a l'impression que c'est jamais terminé Enfin c'est aussi comme ça qu'on apprend à ne plus refaire les mêmes erreurs...

Tes conseils se sont avérés très utiles car désormais sur Firefox il n'y a plus de problèmes ni aucun décalage !
Par contre sous IE6/Maxthon, il reste une bande blanche au même dendroit (entre menu et image dessous), je vais essayer de voir avec ton lien