28173 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme de marge incomprensible, 3/4 pixels de plus sur IE !

Bonjour,

Voici mon xhtml :

<!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>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<!-- le corps -->


	<!-- le menu -->
	<div id="menu"></div>	
	
	<!-- le bloc -->
	<div id="bloc"></div>


</body>
</html>


mon css :


body {
	width:760px;
	margin-top:20px;
	margin-bottom:20px;
	padding:0px;	
}

#menu {
	float:left;	
	width:200px;	
	background-color:#333333;
	height:50px;
	padding:0px;
		
}

#bloc {
height:50px;
	margin-left: 220px;
	padding:0px;
	width:198px;
	background-color:#330099;	
}


Il y a une difference de marge entre ces 2blocs selon le navigateur !

Sur IE ca donne :

http://img28.imageshack.us/img28/6168/img13kz.jpg

(la partie rouge est l'espace qui separe les 2 blocs)

Sur FF ca donne :

http://img28.imageshack.us/img28/8035/img22cv.jpg

Si on supepose la partie rouge entre les 2 blocs, elle empiette sur le bloc violet signe que la marge est plus petite.

Comment regler ca ?

Merci de votre aide
Modifié par Snoopy17 (10 Mar 2007 - 11:19)
Salut,

il s'agit du bug de 3px de Internet Explorer.

Ce bug est relatif au menu flottant, d'ailleurs tu remarqueras sûrement que quand le texte de te contenu dépassera le menu, celui-ci se re-décalera de 3px.

La solution, rajoute ce hack dans ta CSS :
/* début des corrections pour IE. */
* html #bloc {
	height:1%;
}
/* Fin des corrections pour IE.*/


Plus d'infos >>ici<<

@+
Salut Snoopy,

Si tu appliques un "float: left" à la div#bloc (avec un marge à gauche de 20px), ça devrait régler le problème.

Si la div#bloc n'avait pas de largeur, il n'y aurait pas cette différence de marge entre IE et les autres. Mais là ça bug.

D'ailleurs si quelqu'un avait un bon lien où les bugs de MSIE sont listés, je suis intéressé
Modifié par Alan (22 Jan 2006 - 11:26)
Bonjour,

Quelques précisions:
- le bug du three pixel jog est inévitable dans le contexte float/flux (il n'apparaît pas en cas de float/float). Il peut tout au plus être masqué via un jeu de marges ou de position relatives négatives pour "déplacer" les 3 px où ils ne se verront pas, parfois pour les recouvrir.
- il se produit que le bloc en flux soit dimensionné ou non, mais pas de la même manière: les 3 pixels apparaissent à l'extérieur du flux si celui-ci est dimensionné (il a le haslayout). Ils apparaissent à l'intérieur du flux non dimensionné, à côté des boîtes de lignes jouxtant le flottant. Voir http://test.blog-and-blues.org/haslayout/
- il n'a rien de dramatique et peut faire partie des déclinaisons d'un rendu CSS selon les capacités du navigateur.
Modifié par Laurent Denis (22 Jan 2006 - 11:54)
Salut Laurent

a écrit :
Il peut tout au plus être masqué via un jeu de marges ou de position relatives négatives pour "déplacer" les 3 px où ils ne se verront pas, parfois pour les recouvrir.


peux tu expliciter cette methode?
j'ai bien suivit ton lien...
http://positioniseverything.net/explorer/threepxtest.html
... mais je n'arrive pas a reproduire leur methode...

ma solution : donner une largeur à l'element flottant et une marge gauche de la meme valeur que cette largeur à l'élément qui le suit.
puis en utilisant le bug * html pour limité à ie5.5+ (pas pour ie 7 qui n'a plus le bug des 3 pixels), je definis une marge droite de -3px pour le flottant et une marge gauche de la meme valeur pour l'element qui le suit...

existe t il une methode plus générale? sachant que cette méthode demande de définir une largeur pour le floattant... avec les problemes qui peuvent en découler?

merci
Sujet clos
Aller à