Problème de margin (décalage) en fonction du navigateur

Bonjour à tous !


J'ai un problème de margin (je pense), car en fonction du navigateur (Firefox, Chrome ou Opéra) j'ai un petit décalage qui est différent selon le navigateur !

Pour mieux comprendre voici l'adresse : http://www.montpasab.fr

Et pour ceux qui n'ont pas les 3 navigateurs pour tester voici une capture comparative :


http://img641.imageshack.us/img641/3732/comparaisonnavigateur.jpg
Vous voyez que par rapport à l’horizontale (trait rouge) Opera place le titre et le file d'ariane assez haut, sur Firefox c'est un peu moins haut, et sur Google Chrome très bas.

Ce qui fait que lorsque je mets le file d'ariane au centre du bandeau sur firefox, sur google c'est trop bas et j'ai un espace entre le bandeau et le corps en dessous...


Donc voilà, merci à vous
Modifié par Crousti2 (28 Oct 2011 - 20:19)

Bonsoir,

Je crois que le problème vient tout simplement du fait qu'aucune valeur précise n'est attribuée à la propriété margin-top de la balise h1 qui est utilisée pour le titre "Accueil".

Du coup chaque navigateur affiche le titre avec son propre margin-top par défaut. Je viens de voir par exemple que sur Opera c'est une valeur de 0.67em alors que pour Google Chrome on a 0.83em. Cela expliquerait le plus grand décalage observé sur Google Chrome que sur Opera.

Il faudrait donc simplement préciser une valeur qui convienne à ce niveau du CSS :

.titre_page_accueil h1
{
	background: url("../images/design/icones/accueil.png") no-repeat;
	[b]margin-top: XXpx;[/b]
	margin-bottom: 0px;
}

A tester !

Hello,

jeremy-p a sans doute raison. Mais j'ajouterai que le fait que l'image de fond du fil d'Ariane ne suive pas le texte est une erreur de conception. Il y a tout un tas de conditions qui peuvent faire que le texte se retrouve plus haut ou plus bas que prévu, que ce soit des imprécisions dans les styles CSS définis (comme ici) ou une modification de la taille du texte par l'utilisateur.

L'image de fond du fil d'Ariane devrait être appliquée sur un élément qui contient directement le fil d'Ariane (élément placé après le titre dans l'en-tête), et pas sur un conteneur commun.