28173 sujets

CSS et mise en forme, CSS3

Construction du gabarit

Bonjour!

J'ai réussi à faire un gabarit qui me plait beaucoup, avec 3 colonnes et un footer placé toujours en bas (grâce à JS, lien trouvé depuis ce site).

Mais voilà, j'ai un petit problème d'alignement du texte dans IE (en l'occurrences IE6). J'ai réduit mon code au minimum...

La solution est sûrement très simple, mais j'ai essayé plein de trucs sans trouver!


#content {
  margin: 0px auto;
  width: 768px;
  border: thin rgb(0,0,0) solid;
}

#menu_left {
  width: 140px;
  padding: 3px;
  margin: 0px;
  float: left;
  border: thin rgb(0,0,0) solid;
}

#center {
  margin-left: 150px;
  padding: 3px;
  border: thin rgb(0,0,0) solid;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
    </title>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
    <link href='test.css' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="./js/footer.js"></script>
  </head>
  <body>
    <div id='content'>
      <div id='menu_left'>menu gauche</div>
      <div id='center'>Centre<br />Centre<br />Centre<br />Centre<br /></div>
    </div>
  </body>
</html>


Si vous essayez ce code, vous verrez que "Centre" n'est pas aligné (les 2 premières lignes ont plus d'indentation)
(le border c'est juste pour voir où vont mes div)

Merci pour votre aide!
Modifié par -DeN- (13 Jan 2007 - 19:05)
Bonjour,

Il s'agit d'un bug d'Internet Explorer nommé le « Three Pixel Jog ». Il existe sous deux formes :
- bloc non doté de layout (en l'occurrence, sans largeur ou hauteur fixe) : le texte qui est au même niveau que le flottant est décallé de trois pixels ;
- bloc doté de layout : le bloc tout entier est décalé de trois pixels.

Laurent Denis détaille ces deux cas ici : Float et haslayout (6). (Il y a également un lien vers l'article expliquant le concept de HasLayout.)

Lorsque seul le texte est décalé, je ne connais pas de correctif. Par contre, si tout le bloc l'est, on pourra à priori corriger les choses. Ce bug ne concernant que IE6 et inférieurs (il est corrigé dans IE7), je te propose un correctif :
<!--[if lte IE 6]>
<style type="text/css">
#center {
	height: 1%; /* confère le "layout" au bloc */
	margin-left: 0px;
}
</style>
<![endif]-->

Note : div#center ne passe plus sous le bloc flottant (menu de gauche), car il a le layout.
Le décalage entre le menu flottant et div#center devrait être, dans IE6, de pile trois pixels. Si on veut coller les deux blocs, on fera margin-left: -3px. Si on veut un écart de 10px, on fera : margin-left: 7px, etc.
Sujet clos
Aller à