Bonsoir,
J'ai un gros soucis de positionnement sous IE. Ca marche bien avec firefox, opéra, safari, mais IE ne veut rien savoir.
La manière la plus simple de tester ce dont je parle, c'est d'aller sur mon site avec IE:
http://min.lledrith.info. En 1024 ou 1280, au choix.
Vous obtenez un truc comme ça :
Puis vous demandez l'affichage de la barre latérale, genre favoris ou historique, et ça vous donne ça :
Remarquez que IE me compte la marge de droite (margin-right) comme partant du bord de la fenêtre d'affichage du navigateur, au lieu du bord de la page.
Ma page ayant des éléments graphiques (notamment les titres en flash) quand on réduit la fenêtre ça créé des barres de défilement, c'est normal. Ce qui l'est moins c'est le comportement étrange de IE. Testez mon site avec firefox et réduisez la fenêtre du navigateur, rien ne bouge, il me met juste les barres de défilement correspondantes...
Mon code:
<div id="wrapper1"> <div id="content"> <?php print $breadcrumb ?> <?php print $tabs ?> <?php print $help ?> <?php print $messages ?> <?php print $content; ?> </div> <div id="left-sidebar"> <?php print $sidebar_left ?> </div> <div id="right-sidebar"> <?php print $sidebar_right ?> <div style="text-align:center"> <img src="<?php print $base_path; print $directory ?>/images/affiche_min.jpg" alt="" /> </div> </div> <div id="header"> <div class="logo"> <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" type="application/x-shockwave-flash" data="http://www.min-de-nice.fr/files/swf/logomin.swf" width="117" height="65"> <param name="movie" value="http://www.min-de-nice.fr/files/swf/logomin.swf" /> </object> <h1 class='site-name'><a href="<?php print $base_path ?>" title="Home"><?php print $site_name ?></a></h1> </div> <div class="banner"> <object type="application/x-shockwave-flash" data="/files/swf/min-fete.swf" width="750" height="125"> <param name="movie" value="/files/swf/min-fete.swf" /> </object> </div> </div> <div id="footer"> <div id="copyright"> Copyright © <?php print $site_name ?><br /><br /> </div> <a href="http://validator.w3.org/check?uri=referer"><img src="/files/img/logos/valid-xhtml10" alt="Valid XHTML 1.0 strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check?uri=referer"><img src="/files/img/logos/vcss" alt="Valid CSS!" width="88" height="31" /></a> <a href="http://drupal.org"><img src="/files/img/logos/powered-by-drupal.png" alt="Drupal" /></a> </div> </div>
Mon CC:
/* . is a class (maybe several on a page) */ /* # is an id (only one on a page) */ #wrapper1 { position:absolute; top:0; min-width:980px; width:100%; } #left-sidebar { position: absolute; left:0; top:130px; width:200px; } #right-sidebar { position: absolute; right:5px; _right:-5px; top:130px; width:200px; } #content { border: 2px solid #7B7D1A; margin-top:148px; 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; }*/ #footer { text-align:center; padding-top:10px; } #header { position:absolute; top:0; left:0; height:130px; margin:0 0 0em 0; width:100%; } #header .logo { width:150px; text-align:center; } #header .banner { position:absolute; right:0; top:0; }
Merci
