[ RESOLU] Décalage des marges entre navigateurs

Question

geopl

10 Feb 2010 à 08:22

C'est vrai que j'ai pas pensé à mettre mon H1 dans le DIV contenu... Ca règle le problème de visibilité du titre sur IE. Mais pas contre IE ne prend pas en compte les marges de la même façon on dirait ce qui fait que j'ai un décalage entre les 2 navigateur au niveau du contenu et du titre :

Firefox :

IE :

====
HTML
====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Présentation</title> 
<link rel="stylesheet" type="text/css" href="accueil.css"/> 
</head> 
 
 
 
<body> 
 
 
 
<ul id="menu"> 
    <li class="en-cours"><a href="accueil.html">Présentation</a></li> 
    <li><a href="machin.html">Machin</a></li> 
    <li><a href="truc.html">Truc</a></li> 
</ul> 
 
 
 
 
<div  id="contenu"> 
         
        <h1>Présentation</h1> 
         
        <p>Blablablabla..<br /><br /><br /><br /><br /><br />Blablablabla..<br /><br /><br /><br /><br /><br /> 
        Blablablabla..</p> 
 
     
</div> <!--contenu--> 
 
 
</body> 
 
</html>

====
CSS
====

@charset "utf-8"; 
/* CSS Document */ 
 
html { 
    font-size: 100%;    /* Résout les problème de taille de texte entre navigateurs */ 
 
} 
 
body { 
     
    background: url("FondAstral.png"); 
    background-attachment:fixed; 
} 
 
 
 
/* Navigation */ 
 
#menu { 
    /*float-left */            
    width: 160px; 
    margin-top: 400px; 
    margin-left:70px; 
} 
#menu li{ 
    margin-bottom: 7px /* Espace entre les liens*/ 
     
     
     
     
} 
#menu li a { 
    display:block; 
    text-decoration:none; 
    width: 140px; 
    padding: 10px; 
    background: url(icone4.png) no-repeat left top; 
} 
 
 
ul 
{  
  list-style-type: none; 
  padding:0 ;  /* supprime le décalage des listes. */ 
  margin:0;  
}  
 
/* Style au survol et en cours */ 
 
#menu li.en-cours a{ 
    background-image: url(icone5.png); 
    color: black; 
} 
#menu li a:hover { 
    background-image: url(icone5.png); 
    color: black; 
} 
#menu li a:visited { 
    color:black; 
} 
 
/* Cadre de contenu */ 
 
 
 
#contenu { 
    background: url(CadreContenu.png); no-repeat left top; 
    color:red; 
    float:left; 
    width: 640px;     
    margin-left: 300px; 
    margin-top: -350px; 
    padding: 50px; 
    border: red solid ; 
} 
 
h1 {    
    color: #85cc23;       /*Problème de décalage entre Firefox et IE si propriétés attribuées au DIV de Titre*/ 
    font-size: 3em;   
    font-family: monospace, "Times New Roman", Times, serif;   
    width: 400px;   
    height:50px; 
    margin-left: 250px;   
    margin-top: 35px;   
} 
 
#contenu p { 
    margin-top: 100px;     
}

Pour le margin top négatif c'est parcequ'on dirait que l'image se positionne en fonction du menu et pour remonter l'image je dois mettre un chiffre négatif.
Je m' en passerais bien mais je vois pas comment placer mon image autrement...
Modifié par geopl (11 Feb 2010 - 09:40)

Heyoan

10 Feb 2010 à 10:15

Salut,

je t'avais indiqué 2 liens dans ce post que tu n'as visiblement pas pris le temps de lire. Tant que tu ne le feras pas tu continueras à faire au petit bonheur la chance en te demandant pourquoi ça ne fonctionne pas comme tu veux. Smiley murf

Un élément flottant doit être placé en premier dans le code alors que tu l'as mis en second. Du coup, pour des raisons de contexte de formatage tu es ensuite obligé d'utiliser un margin-top négatif qui rend le positionnement instable comme tu as pu le voir. Pourquoi d'ailleurs ne pas avoir fait flotter le menu au lieu du cadre ? (Réponse dans ma première phrase un peu plus haut).

Lorsque tu auras corrigé ça tu pourra également jeter un œil sur l'article Le rendu par défaut des éléments HTML.
Modifié par Heyoan (10 Feb 2010 - 10:23)

geopl

10 Feb 2010 à 21:39

Bonsoir !

J'ai bien sûr essayé de faire flotter le menu en premier. Mais j' obtiens ce résultat :

Firefox :

IE :

Encore un décalage.
J' aimerais bien sûr approfondir mes connaissances en la matière mais je bosse toute la journée et ne peux donc m'y consacrer pleinement malheureusement.

Heyoan

10 Feb 2010 à 22:20

geopl a écrit :
J' aimerais bien sûr approfondir mes connaissances en la matière mais je bosse toute la journée et ne peux donc m'y consacrer pleinement malheureusement.

Ça prendra juste plus de temps d'apprendre. Smiley cligne

Quoi qu'il en soit c'est un passage obligatoire et il me semble que c'est trop tôt pour poser des questions sur le forum... Smiley murf

Une base de travail :

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
body {
	margin: 0;
}

#global {
	padding-top: 200px;
}

#menu {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0 25px;
	list-style: none;
	text-align: center;
}

#contenu {
	margin: 0 0 0 250px;
	padding: 20px 10px;
	width: 600px;
	border: 2px solid red;
}

#contenu h1 {
	text-align: center;
}
</style>
</head>
<body>
<div id="global">
	<ul id="menu">
		<li><a href="index.html">Présentation</a></li>
		<li><a href="machin.html">Machin</a></li>
		<li><a href="truc.html">Truc</a></li>
	</ul>
	<div id="contenu">
		<h1>Présentation</h1>
		<p>Un paragraphe</p>
		<p>Un paragraphe</p>
		<p>Un paragraphe</p>
	</div>
</div>
</body>
</html>

geopl

11 Feb 2010 à 09:31

Bonjour !

Merci pour ton soutiens.

J'ai fait avec la base que tu m' as envoyé et au final j' obtiens le même résultat mais la différence c'est que je me suis rendu compte que je me cassais la tête pour rien et que mon code n' avait pas de sens.

Même résultat veut donc dire même problème de décalage des marges entre les navigateurs. Mais j' ai aussi compris que c' est firefox qui donnait une marge par défaut à mon titre.
Donc j'ai réinitialisé le margin-top sur "auto" pour que Firefox annule sa marge par défaut et mis un padding-top de 30px. Voilà les navigateurs sont d' accord entre et ça fait plaisir Smiley smile

====
HTML
====

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Présentation</title>
<link rel="stylesheet" type="text/css" href="accueil.css"/>
</head> 
<body> 
<div id="global"> 
    <ul id="menu"> 
        <li class="en-cours"><a href="index.html">Présentation</a></li> 
        <li><a href="machin.html">Machin</a></li> 
        <li><a href="truc.html">Truc</a></li> 
    </ul> 
    <div id="contenu"> 
        <h1>Présentation</h1> 
        <p>Un paragraphe</p> 
        <p>Un paragraphe</p> 
        <p>Un paragraphe</p> 
    </div>   						 <!------   contenu -->
 </div>               <!--global-->  
</body> 
</html>

====
CSS
====

@charset "utf-8";
/* CSS Document */

html {
	font-size: 100%;	/* Résout les problème de taille de texte entre navigateurs */

}

body { 
    margin: 0;
	background: url("FondAstral.png");
	background-attachment:fixed;
} 
 
#global { 
    padding-top: 200px;
	
} 

														/*   MENU   */


#menu { 
    float: left; 
    width: 160px; 
    margin: 0; 
    padding: 0 25px; 
    list-style: none; 
    text-align: center; 
} 
#menu li{
	margin-bottom: 7px;
}
#menu li a {
	display:block;
	text-decoration:none;
	width: 140px;
	padding: 10px;
	background: url(icone4.png) no-repeat left top;
}

														/* Style au survol et en cours */
	
#menu li.en-cours a{
	background-image: url(icone5.png);
	color: black;
}
#menu li a:hover {
	background-image: url(icone5.png);
	color: black;
}
#menu li a:visited {
	color:black;
}

														/* Image de contenu plus contenu */

 
#contenu { 
	background: url(CadreContenu.png); no-repeat left top;
    margin: 0 0 0 250px; 
    padding: 20px 10px; 
    width: 725px; 
    border: 2px solid red; 
} 
#contenu p {
	margin: 100px 0 0 20px;	
}

 
#contenu h1 { 
	margin-top: auto;    /* Suppression de la marge avec Firefox ! */
	padding-top: 30px;
	color: #85cc23;  
	font-size: 3em;  
    font-family: monospace, "Times New Roman", Times, serif;  
	text-align: center; 
}

Firefox :

IE :

Voilà, il ne me restera plus qu' à mettre du contenu !
Je prendrai aussi le temps de potasser sur le positionnement parce que ça m' à l' air bien compliqué à gérer !

Merci encore !

6l20

11 Feb 2010 à 10:41

geopl a écrit :
Même résultat veut donc dire même problème de décalage des marges entre les navigateurs. Mais j' ai aussi compris que c' est firefox qui donnait une marge par défaut à mon titre.

Hello

Je reviens tardivement sur ce point, pour te confirmer que "chaque navigateur" applique des marges par défaut aux éléments html.
L'outil mis à disposition par Julien Royer pourra t'être d'une aide précieuse :
Rendu par défaut des éléments HTML

Cdt,
Sylvain

Sujet clos

Questions générales et questions de débutants

[ RESOLU] Décalage des marges entre navigateurs