28173 sujets

CSS et mise en forme, CSS3

[Résolu] Liste à puce décalée sous Internet Explorer.

Bonjour,

J'ai un petit problème de décalage sous Internet Explorer, ce n'est pas le premier, mais pour tous les autres, j'ai trouvé la solution sur votre site (qui est bien fait et très instructif au passage).

D'après ce que l’on voit, c'est le bloc de gauche « options » qui décale ma liste.

Je vous mets le code de la page ainsi que son fichier de style, vous pourrez vérifier par vous-même et me dire si l'erreur ne viendrait pas de moi.


<!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" lang="fr">
 <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 </head>
 <body>
   <div id="site_contenus">
    <div id="options"><p>Options</p><p>Options 1<br />Options 2</p></div>
    <div id="publicites"><p>Publicites</p></div>
    <div id="contenus">
     <p>Contenus</p>
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
    </div> 
    <div id="contenus_both"></div>   
   </div>
 </body>
</html>




body {
 color: white;
 background-color: #2b5e91;
 font-family: Verdana,sans-serif;
 font-size: small;
}
p {
 padding: 2px;
 margin: 2px 2px 6px 2px;
}
#site_contenus {
 width: 938px;
 padding: 2px 6px;
 margin: 0 auto;
 background: #adb9c4;
 color: black;
 font-size: 85%;
}
#contenus {
 background-color: white;
 color: black;
 margin: 0 174px;
 padding: 4px;
 border: solid 1px #778899;
}
#contenus_both {
 clear:both;
 font-size: 1px;
 height: 1px;
 line-height: 1px;
}
#publicites, #options {
 background-color: #efefef;
 border: solid 1px #778899;
 color: black;
 width: 164px;
 padding: 2px;
 margin: 0;
 text-align:center;
}
#publicites {
 float: right;
}
#options {
 float: left;
}


Merci d'avance.
Modifié par Gentoo Warrior (30 Oct 2006 - 23:19)
Salut

Est-ce que par hasard, le décalage en question ne serait pas de 3 petits pixels ? Auquel cas, il s'agit du "Three pixels jog", un bug d'IE lié à la présence des flottants. Pour s'en débarrasser, il faut adapter les marges des éléments voisins. Lire cet article pour plus de renseignements.
Modérateur
bonsoir,

dans ton cas tu n'as pas vraiment la possibilité d'indiqué une largeur bien definie du a la fluidité de l'element entre ses 2 flottants.

Pour donné ce layout , le "zoom:1;" suffirait bien , un display:inline-block; permettrais aussi d'avoir ce resultat et de passer la "feuille de style au validateur".

++

<edit> Attention opera et d'autres comprennent le display:inline-block de façon differentes , alors reservé ceci a IE Smiley smile </>
Modifié par gcyrillus (30 Oct 2006 - 00:35)
Merci à tous les deux, c'était bien un bug d’Internet Explorer.

La solution que j'ai choisie est de donner une taille fixe avec un centrage automatique, la propriété « border » n'est malheureusement pas interprétée partout de la même façon et j'avais un décalage avec Internet Explorer. 


#contenus {
 width: 574px;
 background-color: white;
 color: black;
 margin: 0 auto;
 padding: 4px;
 border: solid 1px #778899;
}


De cette façon, le tout est parfaitement droit, centré et surtout valide.

Encore un grand merci et peut-être a bientôt.
Sujet clos
Aller à