28217 sujets

CSS et mise en forme, CSS3

[Résolu]Encore et tjs des différences entre IE et FF

bonjour,
une fois encore, le résultat entre internet explorer et firefox ne correspond pas...
voila ce que j'obtiens sur FF upload/3132-FF.gif
alors que j'aimerais arriver au meme resultat que Internet Explorer : upload/3132-IE.gif .
www.joelleg.ch pour la page en ligne

<style type="text/css">
html{
		background-color:      #FFFFFF;
		margin:                0;
		padding:               0;
		height:                100%;
}

body{
		margin: 0 auto;
		background: url(design/maison.gif);
		background-repeat: no-repeat;
		width: 760px;
	  height: 800px;	
}


.menu {
	margin-top:102px;
	margin-left: 208px;
	width: 552px;
	position: relative;
	}
	
.menu a {
	text-decoration:none ;
	text-align:center;
	color: #EAB788;
	font-size : 15px ;
	float:left ;
	width:92px ;
	height: 30px;
	padding-top: 6px;
	background-repeat: no-repeat ; 
	}
.onglet_1 {
	background : url(../menus/onglets/onglet_1_inactif.gif); 
	}
.onglet_2 {
	background : url(../menus/onglets/onglet_2_inactif.gif); 
	}
.onglet_3 {
	background : url(../menus/onglets/onglet_3_inactif.gif); 
	}
.onglet_4 {
	background : url(../menus/onglets/onglet_4_inactif.gif); background-repeat: no-repeat ; 
	}
.onglet_5 {
	background : url(../menus/onglets/onglet_5_inactif.gif); background-repeat: no-repeat ;  
	}
.onglet_6 {
	background : url(../menus/onglets/onglet_6_inactif.gif); background-repeat: no-repeat ;  
	}
a:hover {color:#C0C0C0;}

.onglet-actif{
	width: 92px;	
	height: 30px;
	background: url(../menus/onglets/onglet_1.gif);
	background-repeat: no-repeat;
	text-decoration:none ;
	text-align:center;
	color: #EAB788;
	font-size : 15px ;
	float:left;
	padding-top: 6px;
	}
.spacer {clear:both}

/*SOUS-MENUS*/

li {display: inline;}
dd {
	margin:0;
	padding: 0;
 }

.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:30px;
	_left: -40px;
	background: url(../menus/onglets/sous_menu.gif);
	background-repeat: no-repeat;
	} 
a.smenu_lien{
	font-size: 13px;
	color: black;
	padding:0;
	margin: 0;
	width: 100px;
	height: 20px;
  }
a.smenu_lien:hover{color:#C0C0C0;}


</style>

</head>

<body>
 
<?php include ("menus/onglet_1.php"); ?>


</body>

</html>

et le code onglet_1.php 
	
<div class="menu"> <!-- début de la boite contenant les onglets -->
	
<dl>
<dd class="onglet_1 onglet-actif">Onglet 1 <!-- onglet ACTIF -->
			
<ul class="smenu">

<li><a class="smenu_lien" href="#">Sous-menu 1.1</a></li>
						
<li><a class="smenu_lien" href="#">Sous-menu 1.2</a></li>
						
<li><a class="smenu_lien" href="#">Sous-menu 1.3</a></li>
						
<li><a class="smenu_lien" href="#">Sous-menu 1.4</a></li>
							
li><a class="smenu_lien" href="#">Sous-menu 1.5</a></li>
</ul>
</dd>
</dl>
<a class="onglet_2" href="onglet_2.php">Onglet 2</a> <!-- onglet inactif -->  
<a class="onglet_3" href="onglet_3.php">Onglet 3</a> <!-- onglet inactif -->
<a class="onglet_4" href="onglet_4.php">Onglet 4</a> <!-- onglet inactif -->
<a class="onglet_5" href="onglet_5.php">Onglet 5</a> <!-- onglet inactif -->
<a class="onglet_6" href="onglet_6.php">Onglet 6</a> <!-- onglet inactif -->
<div class="spacer"></div> 

	</div>

Merci pour votre aide
Modifié par p_tite_jo (19 Jan 2006 - 19:32)
Salut p_tite_jo,

Ah lala, sacré navigateurs web qu'on ne comprendra décidemment jamais. Smiley bawling . On devrait revenir aux navigateurs textuels, au moins pas de problème de mise en forme. Smiley langue Smiley cligne

Trève de déconnade, je crois avoir trouvé une solution à ton problème.
Tout d'abord, il y a une erreur dans la classe .smenu :

.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:30px;
	[b]_[/b]left: -40px; /** left: 40px; ira mieux **/
	background: url(../menus/onglets/sous_menu.gif);
	background-repeat: no-repeat;
}


Ensuite, ce décalage sous firefox, provient du fait que menu est en position relative et que tu le positionnes dans ta page à l'aide des marges.
Il vaut mieux que tu utilises les propriétés top et left comme ceci :

.menu {
	width: 552px;
	position: relative;
	top: 102px;
	left: 208px;
}


Le problème venait du fait que firefox n'interprétait pas le position relative et qu'il appliquait seulement les marges d'où le décalage. (enfin, je crois Smiley langue )

J'espère que cela t'aidera à résoudre ton problème Smiley cligne .

Juste pour finir, je pense que tu devrais utiliser plus souvent l'attribut id plutot que l'attribut class. Raphael t'expliquera mieux que moi pourquoi ce choix à cette adresse
Modifié par ymhotepa (19 Jan 2006 - 14:40)
ymhotepa a écrit :
SJuste pour finir, je pense que tu devrais utiliser plus souvent l'attribut id plutot que l'attribut class.


Seulement si il n'est apellé qu'une fois dans ta page, sinon, utilise une class, une ID est unique sur une page (je tenais juste à préciser au cas ou
Smiley cligne )
Modifié par Isshin (19 Jan 2006 - 14:41)
.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:30px;
	_left: -40px;
	background: url(../menus/onglets/sous_menu.gif);
	background-repeat: no-repeat;
	}


Quand j'ai remplacé _left: -40px; par left: -40px; ça marche bien alors

ton s.menu change le par ça
.smenu{
	position: absolute;
	width: 552px;
	height: 21px;
	top:30px;
	left: -40px;
	background: url(../menus/onglets/sous_menu.gif);
	background-repeat: no-repeat;
	}
salut P'tite jo,

Problème lié à la fusion des marges (Stephan m'a appris l'autre jour que c'était lun phénomène normal)

Pour éviter cette fusion, ajoute par exemple un padding-top de 1px au body et enlève 1px au margin-top de la div.menu

Ceci dit, ta méthode de centrage ne marche qu'ave la version IE6, pas les versions antérieures. Il faudrait mieux que tu ajoutes un div#global en suivant le procédé décrit dans le tuto Centrer les éléments ou un site web en css
Si tu suis cette méthode, il faudra appliquer le padding-top à la div#global, plus au body.

Ciao
tout d'abord un grand merci pour toutes vos réponses, j'ai pu resoudre mon problème.
a écrit :
Quand j'ai remplacé _left: -40px; par left: -40px; ça marche bien
ah ouais ? par ce que chez moi ça joue toujours pas.. j'ai un décallage de 40px entre Firefox et Internet Explorer (pour un peu, on aurait pas l'habitude Smiley fache )... concernant ce problème j'ai posté ici.
quant à l'emploi des class et des id, en général, je les utilise correctement, mais exceptionnellement j'ai utilisé des class à la place des id parce qu' à la base,j'ai piqué mon menu ici et ils utilisent une "addition" de class: 
<dd class="onglet_1 onglet-actif">Onglet 1

fait référence à .onglet_1{} et .onglet-actif{} et je me suis dit que s'ils avaient utilisé des class plutôt que des id, c'est que ça ne devait pas marcher avec des id.. mais je testerai Smiley cligne
quoi qu'il en soit, un grand merci pour votre aide !!!
J'ai également corrigé mon positionnement en utilisant la méthode d'Alan.
une nouvelle différence apparaît entre les deux navigateurs, les sous-menus( pas leur background) se sont décalés sur la droite sur Firefox.

a écrit :
Si tu suis cette méthode, il faudra appliquer le padding-top à la div#global, plus au body.
quel padding-top ? Smiley confused Smiley ohwell (peut être que mon problème vient de là....)
Modifié par p_tite_jo (19 Jan 2006 - 16:51)
Salut, le padding-top, comme je l'ai expliqué ci-dessus, c'était pour éviter la fusion des marges verticales. Or tu as remplacé le margin-top par la propriété top, donc plus de fusion de marges et plus besoin de padding.

A mon avis tu t'y es mal pris pour ta mis en page. Je ne m'y suis pas vraiment penché, mais tiliser un hack (_left...) me semble facilement évitable. Surtout que la méthode de l'underscore que tu utilises risque (?) de ne plus marcher avec IE7, c'est à dire très bientôt..
euh.. eclaire moi c'est quoi la méthode de l'underscore ?
et pour le décalage de mes sous-menus, tu aurais une idée d' où ça vient ?
Modifié par p_tite_jo (19 Jan 2006 - 18:15)
Bah je viens de te le dire.. je fais référence à la méthode que tu utilises pour qu'un code ne soit lu que par IE : "_left: -40px", en plaçant l'undescore devant la propriété. Si tu l'utilises, tu sais bien ce que c'est non ? Cette "rustine", d'après ce que j'ai lu, ne marcherait plus avec la prochaine version d'IE (et je ne suis pas sûr qu'elle marche avec IE mac).

Tu devrais t'y prendre autrement, sans hack

Bon courage Smiley biggrin
ben non, j savais pas que ça portait ce nom la...on en apprend tous les jours.
si ça marchera plus avec IE 7, ça veut dire qu'ils l'auront amélioré et qu'il traitera le code de la meme manière que Firefox par exemple ? je n'aurais donc plus à mettre de hack !
bon ben tampis.. j'ai trouvé d'où venait le problème.. fallait simplement préciser left: 0; pour IE.. c juste... frustrant Smiley fache
Sujet clos
Aller à