28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Problème de marges sous IE6

Bonsoir,

je tente d'agencer des boites en colimaçon, sans succès sous IE6. Sous ce navigateur, les boites ne se calent pas selon l'axe central de la page, voici mon code, qui fonctionne sans problèmes sous FireFox :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="content-language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {margin:0; padding:0}
.odd {

width:40%;
height:300px;
margin: 0 0 0 10%;
background-color:#000000;
}
.even {
float:right;
width:40%;
height:300px;
margin: 0 10% 0 0;
background-color:#000000;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div style="clear:both; overflow:hidden"></div>
<div class="odd"></div>
<div class="even"></div>
</body>
</html>


Merci de votre aide!
Modifié par MasterPingouin (21 Feb 2008 - 12:47)
Salut,

Surement un problème de doublement des marges.
Pour éviter tu pourrais faire:

<div id="conteneur">
<div class="odd"></div>
<div class="even"></div>
<div style="clear:both; overflow:hidden"></div>
<div class="odd"></div>
<div class="even"></div>
</div>


* {margin:0; padding:0}
#conteneur{
margin: 0 10% 0 10%;
}

.odd {
width:50%;
height:300px;
background-color:#000000;
}

.even {
float:right;
width:50%;
height:300px;
background-color:#000000;
}
Bonsoir MasterPingouin,

Si l'on veut garder en l'état, on pourra faire cette correction pour IE6 via un commentaire conditionnel :


<!--[if lt IE 7]> 
.even {margin-right:5%;}
<![ endif]--> (enlever l'espace avant le endif)


Par contre, je ne vois pas à quoi sert le "overflow:hidden", il me semble même que cela génère une petite marge à cet endroit sous I7 (sans, l'affichage est le même que sous Firefox...)

Cdt,
Sylvain
Sujet clos
Aller à