Bonjour à tous,
Après avoir pas mal cherché, puis consulté plusieurs sites, je me résouds (encore diront certains) a demander l'aide de la communauté.
Apres avoir codé un site et l'avoir vérifié sous FF je l'ai passé sous IE 7 et quelle ne fut pas ma surprise de voir des décalages notables alors que j'ai pris soins de spécifier pour chaque "conteneur" la taille des marges internes et externes:
Illustration:
Version FF:
Version IE7 (les décalages sont les zones éclairées):
On constate qu'il y a un décalage au dessus et au dessous du bandeau ainsi qu'un décalage au niveau du tableau de photo sur la gauche.
Les portions de code concernées:
HTML:
<div id="conteneur"> <h1 id="header"><a href="index.php" title= "Accueil"><img src="pix/header_a.png" alt=header d'accueil, photo de la réception" /></a></h1> <!-- liste sur une seule ligne pour éviter un bug d'affichage avec IE --> <!-- Menu --> <div id="menu"> <!-- menu horizontal --> <span class="preload1"></span> <span class="preload2"></span> <ul class="menu2"> <li class="top"><a href="accueil.php" title= "Accueil" id="home" class="top_link"><span>Accueil</span></a></li> <li class="top"><a href="hotel.php" title= "Hôtel" id="hotel" class="top_link"><span class="down">Hôtel</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <ul class="sub"> <li><a href="chambre.php" title= "Chambres">Nos chambres</a></li> <li><a href="tarifs.php" title= "Tarifs des chambres">Tarifs</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="restaurant.php" title= "Restaurant" id="restaurant" class="top_link"><span class="down">Restaurant</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="menu.php" title= "A la carte..">Menus</a></li> <li><a href="vins.php" title= "Notre cave"">Carte des vins</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="banquet.php" title= "La salle de bal" id="banquet" class="top_link"><span>Banquet</span></a> </li> <li class="top"><a href="equipe.php" title= "Une équipe à votre service" id="team" class="top_link"><span>Equipe</span></a> </li> <li class="top"><a href="contact.php" title= "Conctactez nous" id="contacts" class="top_link"><span>Contact</span></a></li> </ul> <!-- menu des languages --> <div id="flag"> <a href="index.php" title= "Accueil"><IMG src="pix/flag_fr.png" alt="drapeau.png" /></a> <a href="index_en.php" title= "Home"><IMG src="pix/flag_en.png" alt="flag.png" /></a> <a href="index_ru.php" title= "Accueil"><IMG src="pix/flag_ru.png" alt="drapeau.png" /></a> </div> <div class="col_g"> <div id="grille"> <table> <tr> <th><a href="/hdf v3/hotel.php"><img src="pix/ico_h.png" alt="Bouton Hôtel"></a></th> <th><a href="/hdf v3/restaurant.php"><img src="pix/ico_r.png" alt="Bouton Restaurant"></a></th> </tr> <tr> <td><a href="/hdf v3/banquet.php" target="_blank"><img src="pix/ico_b.png" alt="Bouton Banquet"></a></td> <td><a href="/hdf v3/contact.php" target="_blank"><img src="pix/ico_c.png" alt="Bouton Contact"></a></td> </tr> </table> </div> </div> <div class="col_d"> <h2>L'équipe</h2>
CSS:
CSS: [code] body { text-align: justify; font: small, Arial, sans-serif; background: blue /*#D8C6B3*/; overflow: auto; } div#conteneur { width: 785px; background: brown /* #56453A */; text-align:center; border: solid 1px #FDC80F; position: relative; margin: 0; margin-left: auto; margin-right: auto; padding: 0; } h1#header { height: 211px; background: yellow /* #56453A */; padding: 0; margin: 0; } h1#header a { width: 785px; height: 211px; border: none; margin: 0; padding: 0; } #header img {border: none;} .| { color: #FFFF00; } /* Drapeaux */ #flag { text-decoration: none; text-align: left; margin: 10px; margin-right: 0px; background: gray /*#56453A*/; } #flag img {border: none;} /*Corps du site */ .col_d { float: right; width: 400px; margin: 20px; margin-left: 0px; padding: 10px; padding-top: 0px; background: #BFAB82; color: #493722; text-align: justify; font-size: 1.2em; } .col_d h2 { text-align: right; } .col_g { float: left; width: 300px; background: pink; margin: 20px; padding: 0px; /* background: yellow; */ } /* Pied de page */ #footer { clear: both; } #footer a { text-decoration: none; color: #5B6E7C; font-weight: bold; padding-bottom: 20px; clear: both; } #footer a:hover, #footer li a:focus, #footer li a:active { text-decoration: underline; } /* Accueil: tableau: */ a img {border: 0;} #grille { width: 250px; margin-top: 2px; margin: 0px; background: green; } #grille table { border: 2px solid white; padding: 0px; border-collapse: collapse; width: 150 px; } #grille td, th { border: 0 solid white; height: 150px; text-align: center; padding: 0px; }
Bon ca fait un sacré pavé, merci d'avance a ceux qui auront pris la peine de le lire =)
Pour m'a part, j'ai vraiment cherché avant de demadner votre aide et je pense avoir fait tout ce qu'il est conseillé de faire contre ce type de pb: ne pas laisser les margin/padding par défaut etc etc.
Néanmoins le résultat est inutilisable, sous IE7 ca passe presque, sous IE6 c'est une catastrophe, que faire ?
