28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de décalage entre FF et IE

Bonjour,

J'ai un problème de décalage entre Firefox et IE (pb sous FF en réalité...)
Pour visualiser :
http://webessais.free.fr/ff.jpg
http://webessais.free.fr/ie.jpg

J'ai encadré d'une bordure jaune le bloc <p> qui pose problème.
* Sous IE : Pas de pb, la marge top de 20px appliquée à <p class="titre"> est respectée par rapport à son conteneur <div id="bandeau_haut">
* Sous FF : Pb, si je mets une marge top à 20px sur <p class="titre">, cette valeur "embarque" son bloc conteneur <div id="bandeau_haut"> vers le bas, ce que je ne souhaite pas

Je n'arrive pas à trouver la solution...

Voici le code HTML :
-------------------
<body>
<div id="conteneur">
	<div id="bandeau_haut">
		<p class="titre">test de titre texte</p>
		<p class="soustitre"></p>
	</div><!-- fin bandeau_haut -->
	<div id="bandeau_outils">
	</div><!-- fin bandeau_outils -->
	<div id="visuel">
	</div><!-- fin visuel -->
	<div id="pieds_page">
	</div><!-- fin pieds_page -->
</div><!-- fin conteneur -->
</body>

Voici le code CSS :
------------------
/*  ------------------------------------------
/*  Correction des styles HTML par defaut
/*  ------------------------------------------ */
html { width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px; }

body { width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	background-image: url(fond.jpg);
	background-repeat: repeat-x;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000; }

img, table { margin: 0px; padding: 0px; border: 0px; }
ul, ol, li { margin: 0px; padding: 0px; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 , p { margin: 0px; padding: 0px; font-size: 1em; font-weight: normal; }

/*  ------------------------------------------
/*  Disposition a l'ecran des blocs principaux
/*  ------------------------------------------ */

/* Disposition a l ecran du bloc conteneur */
#conteneur { position: relative;
	width: 776px;
	top: 0px;
	left: 50%;
	margin: 0px	auto 0px -388px;
	padding: 0px; }
	
/* Disposition a l ecran du bloc contenu bandeau_haut */
#bandeau_haut { position: relative; 
	width: 776px;
	height: 110px;
	top: 0px;
	left: 0px;
	margin: 7px 0px 0px 0px;
	padding: 0px;
	background-image: url(bandeau_haut.jpg);
	background-repeat: no-repeat; }

/* Disposition a l ecran du bloc contenu bandeau_outils */
#bandeau_outils { position: relative;
	width: 776px;
	height: 33px;
	top: 0px;
	left: 0px;
	margin: 7px 0px 0px 0px;
	padding: 0px;
	background-image: url(bandeau_outils.jpg);
	background-repeat: no-repeat; }

/* Disposition a l ecran du bloc contenu visuel */
#visuel { position: relative;
	width: 776px;
	height: 129px;
	top: 0px;
	left: 0px;
	margin: 7px 0px 0px 0px;
	padding: 0px;
	background-image: url(visuel.jpg);
	background-repeat: no-repeat; }

/* Disposition a l ecran du bloc contenu pieds_page */
#pieds_page { position: relative;
	width: 776px;
	height: 27px;
	top: 0px;
	left: 0px;
	margin: 7px 0px 0px 0px;
	padding: 0px;
	background-image: url(pieds_page.jpg);
	background-repeat: no-repeat; }

/*  ------------------------------------------
/*  Typographie generale du site
/*  ------------------------------------------ */

/* Typographie du titre */
.titre { margin: 20px 0px 0px 104px;
	padding: 0px;
	font-family: Arial;
	font-size: 15px;
	color: #BED6DA;
	text-transform: uppercase;
	border: 1px solid yellow; }

/* Typographie du sous-titre */
.soustitre {
	}

/* Typographie des liens */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

Merci d'avance pour votre aide.
Modifié par DrumSHoTS (04 Aug 2006 - 19:06)
Salut

Est-ce que tu pourrais utiliser les balises du forum prévues pour le code ([ code] et [ /code], sans les espaces) pour le rendre plus lisible ?

Qu'est-ce que ça donne en appliquant par exemple un line-height: 40px; à ce paragraphe ? (je me lance en aveugle, sans tester, un exemple en ligne serait utile Smiley cligne )
Bonjour DrumSHoTS et bienvenue,

Pourrais-tu éditer ton message afin de le mettre en forme (ici le code doit être mis entre [code ] et [/code ] , sans espace) comme il est demandé dans une des règles que tu as normalement lues puisque c'est demandé lors de l'inscription Smiley cligne

Concernant ton problème : il s'agit d'une fusion des marges. Tu pourras trouver plusieurs solutions ICI par exemple.

Sinon, il existe des balises pour les titres : <hn>
Modifié par Alan (04 Aug 2006 - 18:57)
Je n'en reviens pas...
La solution proposée par Alan est magique.
J'avais bien vu que j'avais un problème de fusion de marges, mais je n'ai pas trouvé la solution.

Merci Alan !

Superbe forum !

A très très bientôt, sans aucun doute !

PS : J'ai bien lu les règles cette fois-ci, sujet [Résolu]
Modifié par DrumSHoTS (04 Aug 2006 - 19:07)
Sujet clos
Aller à