Bonjour,
Je ne sais pas trop comment faire pour résoudre ce "bug" IE...
Mon site : http://min.lledrith.info
Alors, le test à effectuer. Ouvrir son navigateur en plein écran, accéder à mon site, puis réduire la largeur de la fenêtre du navigateur.
Sachant que les titres sont en flash, donc en fait ils s'adaptent à la première largeur de la fenêtre du navigateur.
Sous Firefox, pas de souci, quand on réduit la largeur de la fenêtre du navigateur, des barres de défilement apparaissent, et la page n'est pas touchée.
Sous IE, par contre, ça fait la même chose pour tous les élements de type bloc, MAIS le texte se met à se réduire aussi, en plus.
Je pense que ça vient du margin-right. Sous firefox il interprête bien le margin-right comme devant partir du bord de la page, même si ce bord est en dehors de la zone d'affichage visible, alors que sous IE il l'interprête comme devant partir du bord droit de la fenêtre actuelle du browser.
Mon code principal donne un truc comme :
J'ai volontairement enlevé le header et footer pour simplifier...
Et mon CSS donne :
Merci
Je ne sais pas trop comment faire pour résoudre ce "bug" IE...
Mon site : http://min.lledrith.info
Alors, le test à effectuer. Ouvrir son navigateur en plein écran, accéder à mon site, puis réduire la largeur de la fenêtre du navigateur.
Sachant que les titres sont en flash, donc en fait ils s'adaptent à la première largeur de la fenêtre du navigateur.
Sous Firefox, pas de souci, quand on réduit la largeur de la fenêtre du navigateur, des barres de défilement apparaissent, et la page n'est pas touchée.
Sous IE, par contre, ça fait la même chose pour tous les élements de type bloc, MAIS le texte se met à se réduire aussi, en plus.
Je pense que ça vient du margin-right. Sous firefox il interprête bien le margin-right comme devant partir du bord de la page, même si ce bord est en dehors de la zone d'affichage visible, alors que sous IE il l'interprête comme devant partir du bord droit de la fenêtre actuelle du browser.
Mon code principal donne un truc comme :
<div id="wrapper1">
<div id="left-sidebar">
(contenu de ma barre gauche)
</div>
<div id="wrapper2">
<div id="content">
(contenu central)
</div>
<div id="right-sidebar">
(contenu de ma barre droite)
</div>
</div>
</div>
J'ai volontairement enlevé le header et footer pour simplifier...
Et mon CSS donne :
#wrapper1 {
position:absolute;
top:0;
}
#wrapper2 {
}
#left-sidebar {
position: absolute;
left:0;
top:130px;
width:200px;
}
#right-sidebar {
position: absolute;
right:5px;
_right:-5px;
top:130px;
width:200px;
}
#content {
min-width:520px;
border: 2px solid #7B7D1A;
margin-top:18px;
background-color:#C5D97C;
padding-left:10px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
margin-left: 210px;
margin-right:215px;
_margin-right:206px;
}
html>body #content {
margin-left: 210px;
margin-right:215px;
}
Merci