[Résolu] Problème de décalage avec un menu FF mais pas IE

Question

harddream

12 Jun 2007 à 12:48

Bonjour à tous! Smiley smile

Depuis maintenant 5 jours, je penche sur un problème d'apparence toute bête, mais dont je n'arrive absolument pas à en venir à bout!

Je m'explique, Je conçois un site, qui contien donc un header, une barre de navigation rapide en dessous, puis le corps en dessous de la navigation rapide.
Dans ce corps qui est extensible et donc de hauteur automatique ou 100%, j'y intègre sur la gauche un menu.

Je souhaite donc décaler ce menu d'un quainzaine de pixels à partir du haut, donc margin-top: 15px;

Sous Internet Explorer celà mache sans problème, d'ailleurs c'est bizarre...
Tandis que sous Firefox celà me créé un décalage, un vide entre, ma barre de navigation rapide et mon corps!
Si j'utilise un flaot avec mon menu, le corps ne suivra pas son extension automatique en fonction du menu et du contenu du reste de la page.

Alors sa marche sous IE et pas FF... Smiley sweatdrop

Je vous laisse regarder ce que celà donne :
ICI

Voilà le code xHTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<title>SSR Technologie</title>
<style type="text/css" media="screen"><!-- @import url(index2.css)screen; --></style>
<!--[if IE]><link href="index2.css" rel="stylesheet" type="text/css"><![endif]-->
</head>

<body>

<div id="header"><!-- Le header avec bannière uniquement. La barre de navigation rapide n'est pas incluse -->
</div>

<div class="quick">

	<div class="login"><!-- Div de formulaire de connexion -->
	
		<form method="post" action="login_load.php">
		<fieldset class="login_field">
			<label>Pseudo :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!-- Pseudo -->
		
			</label>
			<input type="text" name="pseudo" size="10" tabindex="1" value="pseudo" title="Pseudo"/>&nbsp;&nbsp;<br /><!-- Fin du pseudo -->
			
			<label>Mot de passe :<!-- Mot de passe -->
			</label>
			<input type="password" name="mdp" size="10" tabindex="2" value="mot de 66" title="Votre mot de passe"/>&nbsp;&nbsp;<br /><!-- Fin du mot de passe -->
		
			<div class="send_login"><!-- Div pour le remplacement du bouton de formulaire "send" -->
				<input name="Send" type="image" value="Send" src="send_valid.png" alt="envoyer" title="Envoyer"/>
			</div><!-- Fin du Div du bouton "send" -->
		</fieldset>
		</form>
		
	</div><!-- Fin du div de formulaire de connexion -->

	<div class="navig"> <!-- Bare de navigation rapide -->
	
		<ul>
						<!--[if IE]>
						<li><a href="#">Inscription</a>&nbsp;    |</li>
						<li><a href="#">Présentation</a>&nbsp;     |</li>
						<li><a href="#">News</a>&nbsp;     |</li>
						<li><a href="#">Projets</a>&nbsp;     |</li>
						<li><a href="#">Votre comtpe</a>&nbsp;     |</li>
						<li><a href="#">Contacts</a>&nbsp;     |</li>
						<![endif]-->
						<!--[if !IE]><-->
						<li><a href="#">Inscription</a></li>
						<li><a href="#">Présentation</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Projets</a></li>
						<li><a href="#">Votre compte</a></li>
						<li><a href="#">Contacts</a></li>
						<!--<![endif]-->
						
			</ul>
		
	
	</div><!-- Fin de la barre de navigation rapide -->
	
</div>

<div class="body"><!-- Début du body -->

	<div class="menu"><!-- Début du menu -->
	
	PHP Expert Editor
	
	
	</div><!-- Fin du menu -->


</div><!-- Fin du body -->

<div class="footer"><!-- Début du footer -->

	<div class="footer_text">
	Powered By Harddream<br />
	Copyright &copy; SSR Technologies EURL 494 747 413 RCS Lyon
	</div>

</div><!-- Fin du footer -->

</body>

</html>

Et voici le CSS :


body 
{
   width: 100%;
   height: 100%;
   margin: auto;
   margin-left: auto; /* Pour centrer notre page */
   margin-right: auto;
   background-color: #eae8e7; /* Couleurs de fond */
   text-decoration: none;
   
}
a /* On défini les paramètres par défaut des liens, on vire les laideurs */
{
	border: 0px;
	text-decoration: none; 
	color: #53a6b4;
	font-weight: bold;
}
a:first-letter
{
	color: #FF0000;
}
#header
{
	width: 768px;
	height: 199px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("header_2.png");
}
.quick
{
	width: 771px;
	height: 65px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("quick.png");
	background-repeat: no-repeat;
}
.login
{
	width: 220px;
	height: 40px;
	margin-left: 20px;
	float: left; /* Obligation d'utiliser un flottant */
	margin-top: 10px;
	font-size: 0.9em;
	color: #0765af;
	font-weight: bold;
}
.login_field
{
	border: none;
}
.login input
{
	border: 1px dotted;
	border-color: #FF0000;
	height: 15px;
	color: #000000;
	font-weight: bold;
	font-size: 0.9em;
}
.send_login input
{
	width: 20px;
	height: 20px;
	border: 0px;
	border: none;
	float: left;
	margin-left: 192px;
	margin-top: -18px;
}
.navig
{
	width: 470px;
	height: 30px;
	float: left;
	margin-left: 270px;
	margin-top: -25px;
	
}
.navig ul
{
	list-style-type: none;
	display: inline;
	text-align: center;
	vertical-align: middle;
    margin: 0;
    padding: 0;
	float: left; /* On ajoute des flottants pour que le first-letter puisse fonctionner */
}
.navig li
{
	list-style-type: none;
	font-family: "Time New Roman";
	font-weight: normal;
	display: inline;
	font-size: 16px!important;
	font-size: 14px;
    margin: 0;
    padding: 0;
	float: left; /* On ajoute des flottants pour que le first-letter puisse fonctionner */
}
.navig li:first-letter 
{
	color: #FF0000;
}
.navig li:after
{
	content: "     | ";
	padding: 3px;
}
.navig ul a:hover:first-letter
{
	color: #53a6b4;
}
.navig ul a:hover
{
	color: #FF0000;
}
.body
{
	width: 771px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	background-image: url("body2.png");
	background-repeat: repeat-y;
	
}
.menu
{
	width: 150px;
	height: 400px;
	margin-top: 10px;
	margin-left: 15px;
	border: 1px solid black;
	
}
.footer
{
	width: 771px;
	height: 70px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("footer.png");
	text-align: center;
}
.footer_text
{
	width: 300px;
	height: 65px;
	padding-top: 13px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 0.7em;
}

Alors comment faire ?

Merci d'avance ! Smiley smile

Un clein d'oeil pour ce site qui est tout simplement exellent et son super forum dont je salut tout les membres Smiley cligne

Modifié par harddream (12 Jun 2007 - 16:41)

ghost

12 Jun 2007 à 16:36

Bonjour,

Surement un problème de fusion des marges, un border-top: 1px ... sur ton bloc .body ou un overflow: hidden (peut être, faut voir) devrait régler cela.

harddream

12 Jun 2007 à 16:41

Salut à toi!

Bon ba Merci beaucoup sa marche!

Enfait j'avais deja essayer cette focntion mais pas sur la bonne classe Smiley murf

Je l'ai appliquer sur mon ".menu" et non sur mon ".body"

Problème résolu merci Smiley smile

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème de décalage avec un menu FF mais pas IE