Probleme de marge incomprensible, 3/4 pixels de plus sur IE !

21 janvier 2006 à 22:41:40

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>



<div id="menu"></div>


<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 :

Image utilisateur

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

Sur FF ca donne :

Image utilisateur

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

jp949

22 janvier 2006 à 5:37:58

salut.
C'est le fameux " three pixels jog " d'IE.
autrementsit IE alloue par default une marge de 3pixels a tous les blocs du layout(mise en page).
Les solutions: Si ton design tolere un petit vide de 3pixels , tu diminues la largeur du bloc de 3pixels , si c'est un design avec des images qui doivent ajuster il faut avoir recours a un bloc compensateur qui vient combler ce vide de 3 pixels