[XHTML] Div a width 50% avec un float: left

he bien IE ils fait encore ch*** tout le monde

Sujet résolu

27 janvier 2007 à 12:09:58

Bonjour,

Je fais appel a vous car j'ai un petit problème de difference d'interpretation entre IE et firefox (encore et toujours).

voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Erreur IE</title>
<style type="text/css">
.class1
{
width: 50%;
float: left;
text-align: center;
}
</style>
</head>

<body>

<div class="class1">essai</div>
<div class="class1">essai</div>

</body>
</html>

Donc sous firefox c'est l'effet voulu (edit: opera aussi). Mais IE (autant 6 que 7) interprète mal le width: 50%
il fait un passage a la ligne. Ca marche si je mets 49% mais la page que je fourni est un exemple d'une application plus vaste ou le 49% fait hyper moche.
En gros la je suis bien eu puisque c'est l'histoire de 1 pixel !

j'aimerais savoir corriger ce problème , merci !

strucky

27 janvier 2007 à 20:51:45

En rajoutant une classe sur le 1er div

.decalage1{
margin-left: -1px;
}

<body>

<div class="class1 decalage1">essai</div>
<div class="class1">essai</div>

</body>

Il te faudra user de commentaires conditionnel afin que seul IE l'interprète.

Ou en mettant uniquement le 1er bloc en float.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Erreur IE</title>
<style type="text/css">
.class1
{
width: 50%;
float: left;
text-align: center;
}
.class2{
margin-left: 50%;
text-align: center;
}
</style>
</head>

<body>

<div class="class1">essai</div>
<div class="class2">essai</div>

</body>
</html>

angemaster

28 janvier 2007 à 11:03:17

Personnellement je te conseille, plutôt que de mettre 50%, de mettre 49,99% (je ne sais plus si c'est une virgule ou un point).
Moi sa rendait très bien avec mon menu qui posait aussi problème sous IE. Mais la technique "margin-left: -1px;" est très bien aussi.

Candygirl

28 janvier 2007 à 11:25:26

Citation : angemaster

Personnellement je te conseille, plutôt que de mettre 50%, de mettre 49,99% (je ne sais plus si c'est une virgule ou un point).

+1 En fait le bug n'apparaît que lors d'une largeur d'écran avec un nombre impaire de pixels. La division par 2 donnant un xxx.5 que IE semble arrondir systématiquement au nombre supérieur au lieu de le faire une fois au nombre inférieur afin de respecter le 100% lors de l'addition des 2 blocs.

En mettant 49.99 à une seule des 2 colonnes (pas les 2 où on se retrouvera avec 1 px de pas assez), on aura qqch de un peu plus petit que xxx.5 et donc IE va bien prendre le nombre inférieur pour cette dernière.

EDIT: j'ajouterais juste que ce n'est qu'à partir d'une largeur d'écran de 5000px que l'imprécision commencerait à produire une différence de 1px à la méthode 50/50; y a de la marge

Par contre à ne spécifier que pour IE comme expliqué par strucky pour éviter tout problème genre, je ne sais pas trop pourquoi, mais mon opera demande lui une , plutôt qu'un . pour interpréter les décimales sur le %.

je vais faire des recherches

Lucyberad

28 janvier 2007 à 11:59:45

Merci a vous,
J'ai fait un petit bricolage, et ca marche. de toute facon IE a toujours été aussi du bricolage, donc on va pas se priver, on est pas intégriste.

Le !important est là pour IE7, sachant que oui honte à moi j'ai banni IE6 de mon site :-°

.

donc encore merci a vous.