28220 sujets

CSS et mise en forme, CSS3

[Résolu] Texte décalé sous Internet Explorer

Bonjour à toutes et à tous,

J'ai une page web construit de la manière suivante :

Code HTML :

<div id="structure"
<div id="menu_gauche">
<h4>Menu</h4>
<ul>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
<li><a href="">Un lien</a></li>
</ul>
</div>

<div id="centre">
<h4>Un titre</h4>
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
test test test test test test test test
</div>
</div>


Code CSS : 

body { 
background-color : #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}

#structure {
margin-right : auto;
margin-left : auto;
width : 800px;
background-color : #FFFFFF;
}

#menu_gauche {
float : left;
width : 200px;
margin-top : 50px;
}

#centre {
margin-left : 200px;
border-left : 1px solid #BCBECB;
padding : 15px;
}


Cette page, sous Mozilla Firefox est parfaitement affichée mais sous Internet Explorer Le texte en face du menu est décalé :

http://firefox.performant-hosting.com/images/screen.png

Si quelqu'un trouve une explication à ce problème...

Merci d'avance pour votre aide,
Boudha.
Modifié par Boudha (03 Dec 2005 - 16:56)
Modérateur
bonjour,
c'est un bug (connu) de IE, met ton texte dans une balise <p> par exemple et applique lui un "display:inline ; " et les 3px bug de IE, "disparaissent.
a plus
Modérateur
desolé,
cette astuce fonctionne souvent tres bien, peut-etre alors devrait tu dimensionné ta boite de cette façon: largeur - 200px du menu-3pxde bug d'ie-padding appliqué, ce qui donne environ 565px;
la plus besoin de p ni de display inline, Ie aura la place de repoussée l'ensemble du conteneur de 3px.
a plus
Salut boudha,

Tu es en fait victime du "Three Pixel Gap". Tu trouveras des infos à cette adresse.

Tu trouveras également d'autres infos et surtout une solution dans cet autre sujet. L'explication de Laurent Denis sera surement plus clair que la mienne.

J'espere que cela t'aidera.
Merci beaucoup à vous deux, Dans mon cas il suffisait de rajouter ce code à ma feuilles de styles :

* html #menu_gauche {
  margin-right: 10px;
  }
 
* html p {
  height: 1%;
  margin-left: 0;
  }


Mais bon... comme apparemment Microsoft a corrigé le bug dans la version 7 d'IE et que cette version sort dans pas très longtemps...

En tout cas merci Smiley cligne
Sujet clos
Aller à