[résolu] Décalage Vertical du header sous FF

Bonjour

N'ayant pas trouvé de sujet correspondant à mon problème je viens vers vous pour un probleme de décalage de Div.
J'utilise une feuille de style poposée par Alcréations

Quand je rajoute du texte dans mon header il y a un décalage qui se créé si ce texte est accompagné d'une balise
(dans l'exemple balise <h1> mais meme problème avec <p>) lien vers la page d'exemple.

Lorsque je ne met aucune balise voici le résultat que j'obtiens.

Ci dessous le code de la feuille de style css.

Le décalage est obtenu sous Firefox et opéra et safari. Pas de problème sous Internet Explorer 6 et 7
Merci d'avance pour votre aide

/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background: #eee;
	background-repeat: repeat-x;
}
#header {
	height: 120px;
	background: #B22037 url('Copy of header.jpg');
	background-repeat: no-repeat;
}
#haut {
	height: 40px;
	background: #eee url('Copy of topwrap.jpg');
	background-repeat: no-repeat
}
#conteneur {
	position: absolute;
	width: 900px;
	left: 50%;
	margin-left: -450px;
	background: #eee url('Copy of midwrap.jpg');
	background-repeat: repeat-y;
}
#centre {
	margin-left: 170px;
	margin-right: 235px;
	text-align:inherit;
}
#gauche {
	position: absolute;
	left:0;
	width: 160px;
	margin-left:20px;
	background-color:#99FF33;
}
#droite {
	position: absolute;
	right:0;
	width: 210px;
	margin-right:20px;
	background-color:#99FF33;
}
#botwrap {
	background: #eee url('Copy of botwrap.jpg');
	background-repeat: no-repeat;
	width: 900px;
	height: 40px;
	margin: 0 auto;
}
#pied {
	margin: 0px auto 0 auto;
	text-align: center;
	padding: 5px 0 5px 0;
	color: #666;
	background: #eee;
}

/*MENU COLONNE GAUCHE*/
.left {
	float: left;
	width: 120px;
	margin: 0 10px 0 10px;
}

.left ul {
	padding: 0px 0px 15px 0px;
	margin-left:20px;
}

.left li {
	list-style-type: none;
	padding: 2px;
	font-size: .9em;
}
.left li a{
	color: #AE1C33;
	text-decoration:none;
}
.left li a:hover {
	text-decoration: underline;
}
/*STYLES DE TEXTE*/
#header h1 { 
	padding-left: 25px;
	padding-top:15px;
	font-size: 25px;
	color: #FFF;
}
#header h2 {
	padding-left: 30px; 
	padding-top: 0px;
	font-size: 1.2em;
	color: #FFF;
}
#conteneur h3 {
	text-align:center;
	font-size: 1.1em;
	color: #000;
}
#gauche p {	
	margin-bottom:5px;
	list-style-type: none;
	color:#FFFFFF;
	background: #AE1C33;
	padding: 5px;
	font-size: .9em;}

Modifié par frenchy (19 Jul 2007 - 16:29)

Salut,

sans avoir regardé en détails, je pense que tu as un problème dû à la fusion des marges, que tu dois pouvoir régler en annulant les marges de la balise (<hn> ou <p>) qui suit directement l'espace.

Cette histoire d'annulation de marge m'a "inspiré". Sur la balise h1 du header j'ai rajouté

margin-top:0px;

Ce qui donne comme code pour le h1 du header

#header h1 { 
	margin-top:0px;
	padding-left: 25px;
	padding-top:15px;
	font-size: 25px;
	color: #FFF;
}

Voici le résultat
Merci le problème est résolu
Bonne fin de journée
Modifié par frenchy (19 Jul 2007 - 16:34)