[Résolu] Margin-top : différence entre navigateurs

Question

Lokomass

30 Nov 2011 à 19:36

Bonsoir à tous !

Je but sur un petit soucis mais qui me fait rager !!
J'ai l'impression que c'est FF qui joue le rôle de IE.
J'explique : mon site est exactement pareil sous IE/CHROME/SAFARI mais sous FF non !
Ce sont les margin/top qui posent problème.

Exemple :

ul li#mv1 a {
	margin-top: -4px;
	margin-left: 41px;
}

Sous FF (impecc)

http://data.imagup.com/11/1137343633.png

Sous IE/Chrome/Safari

http://data.imagup.com/12/1137343673.png

Comment est-ce possible ? Que faire avant que je devienne fou ?

Merci Smiley lol

Modifié par Lokomass (30 Nov 2011 - 22:23)

gc-nomade

30 Nov 2011 à 20:37

bonsoir,

Margin n'est pas approprié pour un element de type inline.
Line-height pourquoi pas ?
Margin est applicable a li par exemple sans problème, quant aux listes en générale on passe par un reset ou une redéfinition, des marges internes et externes pour les uniformisées dans les différents navigateurs.

Si en plus il y a des élément flottants dans le flux en amont, cela peut encore augmenter les écarts de fusion de marges d'un nav à l'autre.

Il y a manque d'infos dans la description de ton probléme : code html et css.

GC

Lokomass

30 Nov 2011 à 20:45

Oups oui pardon :

Edit : en fait j'ai plein de différence entre FF et les autres.
Plusieurs hauteur styles (top) sont pas pareils uniquement sur FF.
Certaines pages sont légèrement décalées vers la droite de quelques px dont la page vidéos mais uniquement sous FF.
Que dois-je faire ? Surement que mon code n'est pas très propre. Comment remettre tout ça d'alomb ?

REEDIT : C'est OK avec line-height: 1.1;

Merci beaucoup !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   
   <head>
	   <link rel="shortcut icon" href="icons/favicon.ico" >
	   <link rel="icon" type="image/x-icon" href="icons/favicon.ico" />
	   <link rel="icon" type="image/png" href="icons/favicon.png" />
       <title>Vidéos</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	   <link rel="stylesheet" media="screen" type="text/css" href="styles/common.css" />
   </head>

   
   <body>
        <div id="conteneur">

			<?php include ("includes/header.html");?>
			<?php include ("includes/menu.html");?>
				
			<div id="corps_videos">
				
				<div>
					<ul class="menu_videos">
						<li id="mv1"><a href="javascript:void(0)" onClick="Videos1();">video1</a></li>
						<li id="mv2"><a href="javascript:void(0)" onClick="Videos2();">video2</a></li>
						<li id="mv3"><a href="javascript:void(0)" onClick="Videos3();">video3</a></li>
						<li id="mv4"><a href="javascript:void(0)" onClick="Videos4();">video4</a></li>
						<li id="mv5"><a href="javascript:void(0)" onClick="Videos5();">video5</a></li>
					</ul>
				</div>
				
				<img id="wall" src="images/menus_videos/wall.png"></img>
				<img id="wall_ipo" src="images/menus_videos/wall_ipo.png"></img>
				
				<object id="v1" width="420" height="315">video1</object>
				<object id="v2" width="420" height="315">video2</object>
				<object id="v3" width="420" height="315">video3</object>
				<object id="v4" width="420" height="315">video4</object>
				<object id="v5" width="420" height="315">video5</object>
			</div>

			<?php include ("includes/footer.html");?>	
			
		</div> 
   </body>
</html>

Le css des videos :

/*common.css*/
body {
	margin: 0 0;
	margin-left: auto;
	margin-right: auto;
	background: #dea ;
}

div#conteneur {
	width: 1100px;
	margin: auto auto;
}

img#ipo {
	top: -34px;
	position: relative;
    left: 50%; 
	margin-left: -550px;
}

#corps {
	position: relative;
	top: -30px;
	padding: 20px 20px;
	background-color: #ecf1f3;
	border-radius: 10px;
	text-align: justify;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
}

#corps_videos {
	position: relative;
	top: -30px;
	padding: 20px 20px;
	background-color: #ecf1f3;
	border-radius: 10px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
}

#accueil_titre1 {
	text-align: center;
	font-size: 30px;
	font-weight: bold ;
	color: #444;
}

#accueil_phrase1, #accueil_phrase2, #accueil_phrase3, #accueil_phrase4, #accueil_phrase5, #accueil_phrase6 {
	text-indent: 40px;
	font-size: 12px;
}

#accueil_phrase1, #accueil_phrase5, #accueil_phrase6, #videos_phrase1 {
	text-align: center;
}

#v1, #v2, #v3, #v4, #v5  {
	position: absolute;
	top: 53px;
	left: 461px;
}

#wall {
	position: absolute;
	top: 36px;
	left: 351px;
}

#wall_ipo {
	position: absolute;
	top: 54px;
	left: 547px;
}


/*menu.css*/
ul li#mv1 a {
	margin-top: -4px;
	margin-left: 41px;
	border-radius: 10px;
	height: 28px;
	width: 182px;
	text-decoration: none ;
	background-color: #19f85a;
	color: #444;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	padding-left: 2px;
	padding-right: 2px;
}

ul li#mv2 a {
	margin-top: 19px;
	margin-left: 41px;
	border-radius: 10px;
	height: 28px;
	width: 182px;
	text-decoration: none ;
	background-color: #19f85a;
	color: #444;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	padding-left: 2px;
	padding-right: 2px;
}

ul li#mv3 a {
	margin-top: 19px;
	margin-left: 41px;
	border-radius: 10px;
	height: 28px;
	width: 182px;
	text-decoration: none ;
	background-color: #19f85a;
	color: #444;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	padding-left: 2px;
	padding-right: 2px;
}

ul li#mv4 a {
	margin-top: 19px;
	margin-left: 41px;
	border-radius: 10px;
	height: 28px;
	width: 182px;
	text-decoration: none ;
	background-color: #19f85a;
	color: #444;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	padding-left: 2px;
	padding-right: 2px;
}

ul li#mv5 a {
	margin-top: 19px;
	margin-left: 41px;
	border-radius: 10px;
	height: 28px;
	width: 180px;
	text-decoration: none ;
	margin-bottom: -8px;
	background-color: #19f85a;
	color: #444;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	padding-left: 2px;
	padding-right: 2px;
}

ul li#mv1 a:hover {
	background-color: #ecc134;
	color: #000000;
}

ul li#mv2 a:hover {
	background-color: #ecc134;
	color: #000000;
}

ul li#mv3 a:hover {
	background-color: #ecc134;
	color: #000000;
}

ul li#mv4 a:hover {
	background-color: #ecc134;
	color: #000000;
}

ul li#mv5 a:hover {
	background-color: #ecc134;
	color: #000000;
}

Modifié par Lokomass (30 Nov 2011 - 22:23)

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Margin-top : différence entre navigateurs