Bonjour à vous 
Je viens de m'inscrire en espérant que quelqu'un pourra m'aider à résoudre un petit problème que je rencontre en essayant de rendre un projet sur lequel je travaille compatible entre navigateurs.
Il s'agit d'un menu à base d'ul/li qui utilise la transparence d'images au format png. Comme souvent, tout fonctionne au poil sur firefox, mais je rencontre un souci sous internet explorer (7 et 8 on deux soucis différents, le 6 je n'ose même pas tester) et sous chrome (webkit).
Je vous laisse juger par vous même :
http://zizicoincoin.free.fr/exemple.html
Tout fonctionne bien sous firefox, mais avec les autre navigateurs (sauf ie7) un décalage apparait entre les onglets et le corps de la page. Pour être franc, j'avais ce souci sous firefox aussi, mais j'ai réglé le problème en ajoutant un margin-top négatif sur table.body. Donc, en fin de compte, le problème reste entier : comment faire pour supprimer ce décalage ?
Sous ie7, c'est encore différent car le margin négatif est bien pris en compte, mais les onglets restent derrière le corps de la page. Je suppose qu'un z-index réglera le problème si je garde ce bidouillage du margin négatif. Je n'ai pas encore testé.
En espérant que quelqu'un pourra m'aider
Modifié par myother (01 Apr 2010 - 12:37)
Je viens de m'inscrire en espérant que quelqu'un pourra m'aider à résoudre un petit problème que je rencontre en essayant de rendre un projet sur lequel je travaille compatible entre navigateurs.
Il s'agit d'un menu à base d'ul/li qui utilise la transparence d'images au format png. Comme souvent, tout fonctionne au poil sur firefox, mais je rencontre un souci sous internet explorer (7 et 8 on deux soucis différents, le 6 je n'ose même pas tester) et sous chrome (webkit).
Je vous laisse juger par vous même :
http://zizicoincoin.free.fr/exemple.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<ul class="onglets decal">
<li><a href="#">item 1</a></li>
<li class="active"><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>
<table class="body" cellpadding="0" cellspacing="0">
<tr>
<td style="background: url(images/simple-sprite-c.png) repeat scroll 0px 0px; width: 19px; height: 20px;"></td>
<td style="background: url(images/simple-sprite-h.png) 0px 0px; width: 846px; height: 20px;"></td>
<td style="background: url(images/simple-sprite-c.png) repeat scroll -23px 0px; width: 25px; height: 20px;"></td>
</tr>
<tr>
<td style="background: url(images/simple-sprite-v.png) repeat-y scroll 0px 0px; width: 19px; height: 10px;"></td>
<td style="background: #f0d99b; width: 846px;">
<div class="content">
<br />
<br />
<br />
</div>
</td>
<td style="background: url(images/simple-sprite-v.png) -19px 0px; width: 25px;"></td>
</tr>
<tr>
<td style="background: url(images/simple-sprite-c.png) repeat scroll 0 -20px; width: 19px; height: 23px;"></td>
<td style="background: url(images/simple-sprite-h.png) 0px -20px; width: 846px; height: 23px;"></td>
<td style="background: url(images/simple-sprite-c.png) repeat scroll -23px -20px; width: 25px; height: 23px;"></td>
</tr>
</table>
</body>
</html>
* { margin: 0px; padding: 0px; border: 0px; }
body { padding-top: 15px; font-family: Trebuchet MS; background: #180c06; }
ul.onglets { width: 850px; margin: auto; padding: 0px 40px 0px 30px; }
ul.onglets.decal { margin-top: 28px; }
ul.onglets li { height: 35px; margin: -24px 0px 0px; float: left; list-style: none; background: url("images/onglets-marron-small-left.png") no-repeat left top; }
ul.onglets li a { height: 100%; margin: 0px 0px 0px 5px; padding: 0px 17px 0px 12px; display: block; text-decoration: none; color: #e4c780; font-size: 18px; line-height: 30px; background: url("images/onglets-marron-small-right.png") no-repeat right top; }
ul.onglets li:hover { height: 59px; margin: -24px -13px 0px; background: url("images/onglets-marron-full-left.png") no-repeat left top; }
ul.onglets li:hover a { margin: 0px 0px 0px 30px; padding: 0px 30px 0px 0px; background: url("images/onglets-marron-full-right.png") no-repeat right top; }
ul.onglets li.active { height: 59px; margin: -24px -13px 0px; background: url("images/onglets-vert-full-left.png") no-repeat left top; }
ul.onglets li.active a { margin: 0px 0px 0px 30px; padding: 0px 30px 0px 0px; background: url("images/onglets-vert-full-right.png") no-repeat right top; }
.body { width: 890px; margin: -35px auto 0px; clear: both; }
.body .content { margin: 20px 20px 30px 50px; }
Tout fonctionne bien sous firefox, mais avec les autre navigateurs (sauf ie7) un décalage apparait entre les onglets et le corps de la page. Pour être franc, j'avais ce souci sous firefox aussi, mais j'ai réglé le problème en ajoutant un margin-top négatif sur table.body. Donc, en fin de compte, le problème reste entier : comment faire pour supprimer ce décalage ?
Sous ie7, c'est encore différent car le margin négatif est bien pris en compte, mais les onglets restent derrière le corps de la page. Je suppose qu'un z-index réglera le problème si je garde ce bidouillage du margin négatif. Je n'ai pas encore testé.
En espérant que quelqu'un pourra m'aider
Modifié par myother (01 Apr 2010 - 12:37)
