28173 sujets

CSS et mise en forme, CSS3

Problème affichage menu sur IE et Opera

Voila,

j'ai réalisé un menu léger dont la seul spécialité et le changement de couleur de fond lors du passage sur le bloc.

Le menu est horizontal et composé de 4 bloc.
J'utilise donc un conteneur pour le menu :


.conteneurmenu {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 18px;
background-color: #FFFFFF;
border: 0px ;
padding: 0em;
}


Ensuite les blocs du menu sont définis ainsi :


.menu {
background-color:white; 
width:25%; 
padding:0px; 
height:100%;
float:left;
}

.menu:hover {
background-color: #00AEFF; 
width: 25%; 
padding: 0px; 
height: 100%;
float: left;
}


Et finalement :

<div class="conteneurmenu">

		<a class="menu" href="technique.html">
			Technique
		</a>
		<a class="menu" href="technique.html">
			Technique
		</a>
		<a class="menu" href="technique.html">
			Technique
		</a>
		<a class="menu" href="technique.html">
			Technique
		</a>
		
	</div>


Sous firefox, aucun problème, le menu prend bien la largeur complète. Sous IE, parfois le menu ne prend pas 100% et on le remarque avec le fond qui ne rempli pas tout le bloc et parfois le dernier bloc du menu va à la ligne suivante car il dépasse apparamment du conteneur.
Sous Opera, parfois c'est ok, parfois le menu ne prend pas 100% comme sur IE. Image :
upload/8205-Sanstitre-1.png

Merci
Je pense que tu es sur mac vu ton screen, j'ai testé sur PC avec firefox et ie et je n'ai pas ton bug, tout fonctionne correctement.

Pour ie sur mac c normal microsoft a arreté le devellopement de ie sur mac donc il devient de plus en plus obsolete.
Voilà un exemple plus clair. Le code est simplifié au maximum :

HTML :

<html>

<head>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container">

<div class="block1">1</div>

<div class="block2">2</div>

<div class="block3">3</div>

<div class="block4">4</div>

</div>

</body>
</html>


CSS :

html, body {
	width:100%;
	text-align: center;
}

.container {
width:40%;
height:200px;
margin-left:auto;
margin-right:auto;
background-color: black;
}

.block1 {
border:1px;
float:left;
width:25%;
height:150px;
background-color: green;
}
.block2 {
border:1px;
float:left;
width:25%;
height:150px;
background-color: blue;
}
.block3 {
border:1px;
float:left;
width:25%;
height:150px;
background-color: red;
}
.block4 {
border:1px;
float:left;
width:25%;
height:150px;
background-color: yellow;
}


Résultat Firefox 1.5 :

upload/8205-ff.JPG

OK !

Résultat Internet Explorer 6 :

upload/8205-ie.JPG

Pas du tout bon !

Résultat Opera 9 :

upload/8205-opera.JPG

Pas bon non plus !

Ca fait 2 jours que je traîne la dessus et je ne vois d'où vient ce problème. Est-ce des bugs de navigateur ? Parce que 4 blocs dont la largeur est 25%, ça donne bien 100%, je comprends pas comme IE arrive à mettre ça à la ligne...

Merci
Modifié par Delivereath (30 Aug 2006 - 17:03)
Tu as une bordure.... elle n'est pas gérée par tous pareil :
soit comprise dans les 25% soit en plus des 25% de la taille du bloc... et hop 1 pixel de plus 4 fois ça fait 4 pixels de trop et forcément un passage à la ligne...
Oui c'est juste mais enfait j'ai oublié de mettre la bordure à 1. C'était pour faire un test. Car même en mettant border: 0px j'ai un retour à la ligne sous IE :
html, body {
	width:100%;
	text-align: center;
}

.container {
width:40%;
border:0px;
height:200px;
margin-left:0;
margin-right:0;
background-color: black;
}

.block1 {
margin:0px;
border:0px;
float:left;
width:25%;
height:150px;
background-color: green;
}
.block2 {
margin:0px;
border:0px;
float:left;
width:25%;
height:150px;
background-color: blue;
}
.block3 {
margin:0px;
border:0px;
float:left;
width:25%;
height:150px;
background-color: red;
}
.block4 {
margin:0px;
border:0px;
float:left;
width:25%;
height:150px;
background-color: yellow;
}
Salut.

Apparemment, ce genre de comportement est dû à une différence d'arrondi entre IE et Firefox. Apparemment, lors de la conversion du 25% en pixels, IE utilise un arrondi mathématique correct, tandis que Firefox tronque à l'unité inférieure.

Donc, ça tient dans le bloc parent avec Firefox mais pas forcément avec IE.

C'est sur le blog d'Alsa.
Sujet clos
Aller à