28173 sujets

CSS et mise en forme, CSS3

[resolu] Decalage de ma zone contenu sous IE 6

Je rencontre un petit problème sur IE 6 que je n'arrive pas à résoudre.

la zone centrale (en blanc) est décalé de 1 pixel à cause d'un menu positionné sur un bloc à gauche

Voici l'adresse : http://www.raphael-pinet.com/home.html

Ce problème n'apparait pas sur Opéra 8.54, Netscape 7.1 et Mozilla Firefox 2

Dans la feuille de style les marges internes et externes de la balise <ul> sont supprimées afin d'éviter les problèmes de compatibilité mais il reste ce tout petit décalage sur IE.

Code de CSS :

#blocmenugauche {
float: left;
width: 150px;
background-color: green;
color: white;
}

ul#menugauche {
margin: 0;
padding: 0;
list-style-type: none;
}

#menugauche a {
display: block;
padding-left: 10px;
color: white;
text-decoration: none;
line-height: 20px;
width: 140px;
background: #0050bb;
}

#menugauche a:hover {
color: white;
background: #00306e
}
Modifié par rafael (29 Sep 2006 - 23:26)
Salut & bienvenue.

Ah ben oui, Raphael, c'était déjà pris Smiley lol

Ton problème présente tous les symptomes du "three pixels jog", un bug connu d'IE. Tu peux t'en débarasser en appliquant un margin-right de -3px à ton flottant de gauche ou à son conteneur (je ne sais plus). Cette rectification est évidemment à réserver à IE via les commentaires conditionnels si tu ne veux pas bousiller le rendu sur les navigateurs conformes.

Par ailleurs, pour éviter que les blocs de la colonne de droite qui ne touchent pas le flottant ne se décalent cette fois vers la gauche, il faut doter le conteneur de la colonne de droite de layout (par exemple en ajoutant à ses propriétés, toujours via les commentaires conditionnels, height: 1%;.

Edit : pourrais-tu éditer ton message et entourer ton code xHTML/CSS avec les balises [ code] et [ /code] (sans espaces) afin de rendre ton message plus lisible et de te mettre en accord avec les règles du forum ?
Modifié par Sopo (28 Sep 2006 - 21:42)
Salut

Merci pour la réponse mais malgré ces indications, le margin-right de -3px, je ne parvient pas à résoudre le problème que se soit sur le flottant de gauche ou à son conteneur.

Peux-il y avoir une autre solution ?

A l'avenir je mets mon code entre les balises.
Bonjour

Suite à la réponse de SOPO, je me suis intéressé au commentaire conditionnel qui semble être parfaitement adapté pour mon problème de décalage.

J'ai donc dupliqué la feuille de style que j'utilise puis modifié le code pour IE et enfin je l'ai enregistrée sous un autre nom (style_ie.css).

Puis, j'ai modifié ma page html entre les balises <head> de la façon suivante:


<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css"/>

<!-- [if lte IE 6] >
<link rel="stylesheet" type="text/css" href="style_ie.css"/>

<![endif] -->

</head>


J'ai même modifié certaines couleurs dans la feuille de style pour IE afin de bien repérer la prise en charge de cette CSS. Mais voilà, cela ne change rien. Ai je oublié quelquechose ?
Salut.

Il me semble qu'il y a des espaces en trop dans tes commentaires conditionnels ... Difficile d'afficher ça corectement sur le forum à cause des crochets, mais tout doit être collé à l'exception de ce qui se trouve dans les crochets ... Donc, pas d'espaces entre les tirets, le point d'exclamation ou le > et les crochets.
Merci beaucoup SOPO

En effet, il y avait des espaces en trop dans le commentaire conditionnel. Cela est résolu pour cette partie. Ma feuille de style (style_ie.css) est parfaitement prise en compte maintenant mais le problème de la marge reste identique.

Je réedite ma feuille de style afin de voir si le problème ne vient pas d'ailleurs. J'ai testé le margin-right: -3px sur le #blocmenugauche, sur le ul#menugauche, sur le #menugauche a, et sur le #menugauche a: hover. Aucun succès.
Aurais-je une marge "blocante" ailleurs ? Mon code me semble plutôt propre (dixit css 2 - eyrolles - raphael goetter)



body {
	margin: 0;
	padding: 0;
	background-color: blue;
	}
	
#global {
	position: absolute;
	width: 750px;
	background-color: yellow; 
	left: 50%;
	margin-left: -375px;
	margin-top: 10px;

	}

#blocentete {
	width: 750px;
	height: 129px;
	background-color: #0050bb;
	}
		
#blocnavigation {
	margin-left: 150px;
	height: 20px;
	background-color: #00306e;
	padding-left: 0px;
	}
	
ul#menunavigation {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 0.7em;
	list-style-type: none;
	}		

#menunavigation li {
	float: left;
	}
	
#menunavigation a {
	display: block;
	color: white;
	text-decoration: none;
	width: 116px;
	height: 20px;
	background: #00306e;
	text-align: center;
	padding-left: 2px;
	padding-right: 2px;
	line-height: 20px;
	}	
	
#menunavigation a:hover {
	color: #0050bb;
	background: #ffffff;
	}
	
#blocreperage {
	margin-left: 150px;
	margin-right: 0px;
	height: 20px;
	background-color: gray;
	}

#blocmenugauche {
	float: left;
	width: 150px; 
	background-color: green;
	color: white;
	}

ul#menugauche {
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin-right: -3px;
	}

#menugauche a {
	display: block; 
	padding-left: 10px;
	color: white;
	text-decoration: none;
	line-height: 20px; 
	width: 140px; 
	background: #0050bb;
	
	}
	
#menugauche a:hover {
	color: white;
	background: #00306e
	
	}
				
#contenu {

	margin-left: 150px;
	padding-top: 10px;
	height: 600px;
	background-color: #ffffff;
	}
	
#contenu p {
	margin-top: 0px;
	padding-top: 0px;
	margin-left: 0px;
	padding-left: 10px;
	
	}			
	
#pied {
	clear: both;
	width: 750px;
	background-color: #baa800;
	margin: 0;
	}


Depuis le temps passé à essayer de résoudre ce problème, je serais ravi d'indiquer Smiley resolu .

Merci de tes conseils.
Bonsoir,

En cherchant on trouve toujours.

Le problème est résolu après lectures du sujet sur les archives du forum et multiples essais

Merci SOPO de m'avoir éclairé.
Sujet clos
Aller à