Bonjour,
Après 10 ans de codage à l'ancienne, je me décide enfin à faire mes sites en divs and co...
Pour ça, je m'exerce sur un petit site... et vous propose au fur et à mesure des bugs IE rencontré de vous les exposer (ceux pour lesquels, je n'ai pas trouvé de solution evidement)
L'idée de base est de partir sur une architecture globale en tableau la plus simple possible... dans ce cas, 3 colonnes, 1 lignes... certainement 2 par la suite pour le footer.
Le tout en essayant d'être sémantiquement ok... le plus possible et d'eviter d'avoir recours aux hacks pour IE (le plus possible aussi).
Voici le code HTML :
Et le code CSS, en commentaire LE problème :
Avec ce code sur des navigateurs respectueux des standarts type firefox ou Safair... c'est impecc... par contre IE, cette ligne provoque un espacement de mes liens du menu... d'ailleurs un display:none fait le même effet sur les liens...
On retire le position:absolute et hop, ça marche sur IE et, bien entendu, plus sur les autres.
Biensûr ce problème pourrait vite contourner avec une feuille de style pour IE et les autres ou des commentaires IE mais ce qui me taraude, c'est pourquoi ces espaces sont créés par IE ?
J'ai volontairement encadré mes liens pour que vous puissiez constater la difference sur l'exemple en ligne, ici
Merci pour votre aide.
Modifié par u-lounge (12 Dec 2006 - 18:19)
Après 10 ans de codage à l'ancienne, je me décide enfin à faire mes sites en divs and co...
Pour ça, je m'exerce sur un petit site... et vous propose au fur et à mesure des bugs IE rencontré de vous les exposer (ceux pour lesquels, je n'ai pas trouvé de solution evidement)
L'idée de base est de partir sur une architecture globale en tableau la plus simple possible... dans ce cas, 3 colonnes, 1 lignes... certainement 2 par la suite pour le footer.
Le tout en essayant d'être sémantiquement ok... le plus possible et d'eviter d'avoir recours aux hacks pour IE (le plus possible aussi).
Voici le code HTML :
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td class="gauche">
<div id="menu_container">
<div id="logo"><!-- --></div>
<form id="connexion">
<div>
<label>login</label><input type="text">
<label>pass</label><input type="text">
<!--<input type="image">-->
</div>
</form>
<div id="nav_container">
<ul id="navigation">
<li><a id="lien1" title="accueil" accesskey="1" href="index.php"><span>accueil</span></a></li>
<li><a id="lien2" title="articles" accesskey="2" href="articles.php"><span>articles</span></a></li>
<li><a id="lien3" title="tests live" accesskey="3" href="tests_live.php"><span>tests live</span></a></li>
<li><a id="lien4" title="clan" accesskey="4" href="tests_live.php"><span>clan</span></a></li>
<li><a id="lien5" title="matchs" accesskey="5" href="matchs.php"><span>matchs</span></a></li>
<li><a id="lien6" title="videos" accesskey="6" href="videos.php"><span>clan</span></a></li>
<li><a id="lien7" title="forum" accesskey="7" href="forum.php" target="_blank"><span>forum</span></a></li>
</ul>
</div>
<div id="navigation_bas"><!-- --></div>
</div>
</td>
<td class="seperation"><img src="img/fond_separation.gif" alt=""\></td>
<td class="droite">
<h1><!-- --></h1>
<div id="bandeau"><!-- --></div>
</td>
</tr>
</table>
Et le code CSS, en commentaire LE problème :
/* CSS Document */
html * {
margin:0;
padding:0;
}
body {
background:#e4dbc7 url("img/fond_bg.gif") repeat-y;
font:11px "Trebuchet MS", sans-serif;
color:#FFF;
}
table {
width:100%;
}
form label {
cursor:pointer;
}
fieldset {
border:none;
}
/* Form field text-scaling */
input, select, textarea {
font-size:100%;
}
img {
border:0;
}
/**********************************************************
GAUCHE
************************************************************/
.gauche {
background-color:#591418;
width:445px;
vertical-align:top;
}
#menu_container {
width:445px;
height:600px;
}
#logo {
height:53px;
background:url("img/logo.gif") no-repeat;
}
form#connexion{
height:29px;
background-color:#000000;
padding:0 10px 0 10px;
}
div#nav_container {
height:157px;
background:url("img/main.gif") no-repeat;
position:relative;
}
ul#navigation{
/********* ligne à problème **************/
position:absolute;
/**************************************/
right:10px;
list-style-type:none;
}
ul#navigation li a{
display:block;
margin:0;
padding:0;
height:21px;
width:55px;
background:url("img/accueil.gif") no-repeat;
text-decoration: none;
border:1px solid #FFF;
}
ul#navigation li a:hover{
background:url("img/accueil_over.gif") no-repeat;
}
ul#navigation li a span{
position:absolute;
text-indent:-5000px;
}
div#navigation_bas{
height:19px;
background-color:#000000;
}
/**********************************************************
FIN GAUCHE
************************************************************/
.seperation {
width:10px;
background-color:#FFFFFF;
vertical-align:top;
}
.droite {
background:#e4dbc7 url("img/fond_content.gif") repeat-x;
vertical-align:top;
}
h1{
margin-top:46px;
margin-left:431px;
margin-bottom:33px;
background:url("img/titre.gif") no-repeat;
width:101px;
height:12px;
}
#bandeau {
background:url("img/bandeau.jpg") no-repeat;
height:157px;
}
Avec ce code sur des navigateurs respectueux des standarts type firefox ou Safair... c'est impecc... par contre IE, cette ligne provoque un espacement de mes liens du menu... d'ailleurs un display:none fait le même effet sur les liens...
On retire le position:absolute et hop, ça marche sur IE et, bien entendu, plus sur les autres.
Biensûr ce problème pourrait vite contourner avec une feuille de style pour IE et les autres ou des commentaires IE mais ce qui me taraude, c'est pourquoi ces espaces sont créés par IE ?
J'ai volontairement encadré mes liens pour que vous puissiez constater la difference sur l'exemple en ligne, ici
Merci pour votre aide.
Modifié par u-lounge (12 Dec 2006 - 18:19)