Mise en page IE 7 / FF 3

Bonjour à tous,

Après avoir parcouru un certain nombre de topic de ce forum, je n'ai pas trouvé la réponse à ma question et je n'arrive pas à trouver ou le problème se situe réellement.

Pour situer le problème dans son contexte, j'ai un header fixe centrer horizontalement, juste en dessous j'ai le début du cadre contenu qui contient le menu, ce cadre est également centrer horizontalement. Dans ce cadre, il y a une liste pour faire le menu en question. Jusque là, pas de soucis. Par contre sur Internet Explorer 7 cette div est collé contre le header ( c'est ce que je souhaite ) alors que sur firefox elle ne l'est pas. Je n'ai aucune propriété css dans mon code qui positionne cette div et je n'arrive donc pas à mettre en place un code qui aurait le même résultat sur ces deux navigateurs.

Je vous laisse ci dessous un aperçu de ma feuille de style et du code html de ma page.

<!-- Header -->
<div id="header"></div>

<!-- Menu de navigation -->

	<div id="ContentHigh">
	
       	<div id="navcontainer">
		<ul>
				<li id="active"><a href="index.html" id="current"> ACCUEIL </a></li>
				<li><a href="lineup.html"> LINE UP </a></li>
				<li><a href="informations.html"> INFORMATIONS </a></li>
				<li><a href="acces.html"> ACCES </a></li>
				<li><a href="partenaires.html"> PARTENAIRES </a></li>
				<li><a href="contact.php"> CONTACT </a></li>
		</ul>
		</div> 
		<a href="#"><img src="images/germany.png" alt="germany" width="18" height="12" border="0" /></a>
        <a href="#"><img src="images/france.png" alt="france" width="18" height="12" border="0" /></a>
		<a href="#"><img src="images/english.gif" alt="english" width="18" height="12" border="0" /></a>
	</div>

Et voici le css qui correspond à ce bou de code :

#header {
	background-image: url(../images/Header.png);
	background-repeat: no-repeat;
	height: 342px;
	background-position: 50%;
}


#ContentHigh {
	background-image: url(../images/ContentHigh.png);
	background-repeat: no-repeat;
	height: 46px;
	width: 901px;
	margin-left: auto; 
	margin-right: auto; 
}

#navcontainer ul li{
	list-style-type: none;
	display: block;
	float: left;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	width: 130px;

}

#navcontainer a{
	color: #8b8888;
	text-decoration: none;
	display: block;
	padding-bottom: 10px;

}

#navcontainer li#active {
	color:#4c7ada;
	background-image: url(../images/rollover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}

	
#navcontainer a:hover {
	color: #4c7ada;
	background-image: url(../images/rollover.png);
	background-repeat: no-repeat;
	background-position: center bottom;

}

Ma question est donc, comment faire pour que la div ContentHigh soit collé à la div Header et est ce qu'il est possible de centrer verticalement l'intégralité du contenu de la div ContentHigh ?

Je vous remercie par avance pour votre aide.
Bonne journée.
Modifié par kilkikou (14 Jul 2009 - 11:41)

Bonjour,

Pour le problème d'espacement, il faut savoir que les navigateurs donnent des valeurs par défaut à plusieurs propriétés CSS des éléments HTML, et ces valeurs par défaut ne sont pas toujours les mêmes, c'est le cas notamment pour les <ul> qui auront des margin et padding de base différent dans IE et FF. Pour être sûr que les éléments auront les mêmes propriétés dans les deux navigateurs, il suffit de les définir. Dans ton cas, c'est padding et/ou margin qui sont concerné, à toi de leur donné la bonne valeur.

Pour le centrage vertical, je te laisse lire cet article qui résume assez bien les techniques existantes et leurs faiblesses

Je te remercie pour ta réponse.

Effectivant en rajoutant tout simplement :

ul {
	margin:0px;
}

Mon problème est résolu.
Je savais pas que cet élément html possédait des valeurs différentes suivant les navigateurs, je saurais pour la prochaine fois.

J'avais déja lu l'article sur le centrage et je ne suis pas parvenu à l'appliquer à mon cas de ficture. Je vais le relire à tête reposer et si j'ai encore un soucis je reposterais ici.

Merci.
Modifié par kilkikou (14 Jul 2009 - 13:43)