Bonjour à tous,
Après avoir pas mal cherché, puis consulté: http://css.alsacreations.com/xmedia/exemples/design_css2/etape6.html notamment, 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:
http://xis.breizhdev.net/gfx/version-ff.png
Version IE7 (les décalages sont les zones éclairées):
http://xis.breizhdev.net/gfx/bug-ie.png
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:
CSS:
Modifié par xis (26 Oct 2007 - 19:30)
Après avoir pas mal cherché, puis consulté: http://css.alsacreations.com/xmedia/exemples/design_css2/etape6.html notamment, 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:
http://xis.breizhdev.net/gfx/version-ff.png
Version IE7 (les décalages sont les zones éclairées):
http://xis.breizhdev.net/gfx/bug-ie.png
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%20v3/hotel.php"><img src="pix/ico_h.png" alt="Bouton Hôtel"></a></th>
<th><a href="/hdf%20v3/restaurant.php"><img src="pix/ico_r.png" alt="Bouton Restaurant"></a></th>
</tr>
<tr>
<td><a href="/hdf%20v3/banquet.php" target="_blank"><img src="pix/ico_b.png" alt="Bouton Banquet"></a></td>
<td><a href="/hdf%20v3/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;
}
Modifié par xis (26 Oct 2007 - 19:30)
