18041 sujets

Questions générales et questions de débutants

[Résolu] Problème de décalage sous IE 6

Bonjour,

Bon voilà, je fais toujours tout mon possible pour me débrouiller à trouver sur le net lorsque j'ai un problème, mais là, j'y suis depuis hier soir et je tourne en rond sans trouver.

J'ai un problème de décalage de DIV qui n'apparait que sous IE, et pas sous FF comme le montre les screens suivant:

Sous IE:
http://amaxonline.free.fr/alsa/ie.gif

Sous FF:
http://amaxonline.free.fr/alsa/ff.gif

Mon code:


<!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" lang="fr" xml:lang="fr">
<head><title>Mon Site</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href="style.css" rel="stylesheet" type="text/css">
</head><body>
<div id="main">
<div id="header_top"></div>
<div id="header_flash"></div>
<div id="contenu"></div>
<div id="footer"></div>
</div></body></html>


Mon CSS:

html, body {
  width:100%;
  margin: 0px;
  background-image: url("_res/gris.png");
  background-repeat: repeat;
}

div#main {
  position: relative;
  margin: 0 auto 0 auto;
  width: 762px;
  text-align: left;
}

/* ### Header & Page ### */
#header_top {
  width: 762px;
  height: 16px;
  background-image: url("_res/header_top.png");
  background-repeat: no-repeat;
}

#header_flash {
  width: 762px;
  height: 160px;
  background-image: url("_res/header_flash.png");
  background-repeat: repeat-y;
}

#contenu {
  width: 762px;
  background-image: url("_res/bg_content.png");
  background-repeat: repeat-y;
}

#footer {
  width: 762px;
  height: 60px;
  text-align: center;
  background-image: url("_res/footer.png");
  background-repeat: no-repeat;
}


A l'aide please, c'est ma première fois en DIV/CSS, et j'ai bien du mal.
J'vais pô revenir aux TABLE quant même, si ? Smiley decu
Modifié par AMaX (05 Oct 2009 - 12:24)
Salut,

Ce problème survient quand la hauteur spécifiée est inférieure au line-height calculé du div. En effet, IE6 alloue automatiquement l'espace nécessaire à un texte éventuel.

Vu que le line-height est calculé à partir du font-size, on peut attribuer un font-size de 0 pour le div en question :

<div style="height:10px;font-size:0"></div>


Malgré un font-size de 0 il est impossible d'obtenir une hauteur de 1px sur IE6, ce que permet de faire la propriété overflow :

<div style="height:1px;overflow:hidden"></div>
C'était bien ça, je ne risquai pas de trouver tout seul...

Merci beaucoup, et pour la vitesse, et pour la qualité de ta réponse.
Sujet clos
Aller à