[CSS] Onglets + Cadre: probleme avec FF

Marsh Posté le 07-09-2006 à 00:48:20

Salut,

J'essaie de mettre en place un ensemble "Onglets + Cadre" en CSS.
J'ai globalement reussi a deux reprises pour IE, mais rien pour FF (et Opera)...

La premiere fois, j'ai fait ca sans m'appuyer de quoi que ce soit, juste avec les quelques regles de base du CSS. Resultat OK avec IE, du moins ca fait ce que je veux, mais avec FF (et Opera): pas moyen. Les coins ne se placent pas au bon endroit!

La seconde, j'ai utilise a la lettre la technique detaillee ici: http://pompage.net/pompe/portescoulissantes/ Je me sers de ce code comme "bordure haute" de mon cadre, a laquelle je viens ajouter le reste de mon code pour le cadre: cote gauche et droit en repeat-y, coin haut-gauche et droit, bordure du bas. Globalement, ca revient au meme que ce que j'avais fait dans ma premiere methode. Ca marche egalement tres bien sous IE, mais sous FF (et Opera) les coins se placent trop haut!!! Je ne vois pas quoi faire pour corriger ca.

Voici un screen qui visuellement explique le probleme:

Est ce qu'il est utile que je copie colle le code HTML et CSS de la partie onglet? Car c'est rigoureusement (au niveau du positionnement) le meme que celui du "tuto" que j'ai cite plus haut.
Si ca peut aider, dites le moi, je la copierais.

Voici le code que j'ai ajoute a la suite de ce div:

HTML:

Code :

<div id=\"tabs_header\">
<ul>
<li><a href=\"#\">Onglet 1</a></li>
.......
</ul>
</div>
<div id=\"tabs_bottom_center\">
<div class=\"tabs_content_left\">
<div class=\"tabs_content_right\">
<div class=\"tabs_top_left\"><div class=\"tabs_top_right\"></div></div>
<div id=\"tabs_content\">
BLABLABLA / CONTENU DU CADRE
</div>
<div class=\"center_bottom_left\"><div class=\"center_bottom_right\"></div></div>
</div>
</div>
</div>

au niveau du CSS, <div id=\"tabs_header\"> prend 100% de largeur, flottant (comme dans l'exemple du tuto), il contient tous les onglets de la bordure superieure du cadre.
pour les CSS du dessous du cadre, voici ce que j'ai:
CSS

Code :

#tabs_bottom_center {
background: url('../images/centre_bas.gif') center bottom repeat-x;
}
div.tabs_content_left {
background-image: url('../images/fond_gauche_centre.gif');
background-position: bottom left;
background-repeat: repeat-y;
padding-left: 6px;
}
div.tabs_content_right {
background-image: url('../images/fond_droite_centre.gif');
background-position: bottom right;
background-repeat: repeat-y;
padding-right: 6px;
}
div.tabs_top_left {
background-image: url('../images/tabs_top_left.gif');
background-position: top left;
background-repeat: no-repeat;
height: 8px;
margin-left: -6px;
margin-top:-5px;
}
div.tabs_top_right {
background-image: url('../images/tabs_top_right.gif');
background-position: top right;
background-repeat: no-repeat;
height: 8px;
margin-right: -6px;
position: relative;
z-index: 10;
}
div#tabs_content {
padding:2px;
width: 100%;
}

Pour info: un cadre simple sans la bordure a onglet fonctionne tres bien avec le code du dessous. sous IE tout marche impeccable. le seul probleme que j'ai est ce probleme avec les deux coins mal positionnes dans Firefox (et Opera, mais ca marche avec IE6 [:zytrafumay] )
A vue de nez je dirais que le probleme est a cause du fait que la bordure du haut+onglets est un FLOAT

Une idee pour me depanner?
[:romf] [:zytra]