Mauvais positionnement sous FF

[le_fleau]

Bonjour,

Je suis en train de restructurer mon site en XHTML Strict. J'aurais une petite question par rapport à cette page : -http://www.site-exemple.com/home/sport-ligue1.html . Comment faire pour que le tableau s'affiche sous la barre avec l'onglet "Classement" sous Firefox. Le résultat s'affiche correctement sous IE, mais pas sous Firefox. COmment résodre le problème ?

J'ai isolé les éléments qui posent problème dans cette page : -http://www.site-exemple.com/essai.html . Sous firefox, le tableau n'apparait pas sous le <div id="onglets">......</div>, il apparaît à droite des onglets

Le problème est illustré ci dessous. Le tableau dont je parle est entouré en rouge :

Résultat sous IE (affichage correct) :

Résultat sous Firefox (avec le problème) :

Voici le code CSS des onglets :

#onglets {

float : left; 

width : 100%;

margin-bottom:10px;

background : url("img/onglet_bg.gif") repeat-x bottom;

font-size : 93%; 

line-height : normal; 

} 

#onglets ul {

margin : 0; 

padding : 10px 0px 0; 

list-style : none; 

} 

#onglets li {

display : inline; 

margin : 0; 

padding : 0; 

} 

#onglets a {

float : left; 

background : url("img/onglet_left.gif") no-repeat left top; 

margin : 0; 

padding : 0 0 0 9px; 

border-bottom : 1px solid #999; 

text-decoration : none; 

} 

#onglets a span {

float : left; 

display : block; 

background : url("img/onglet_right.gif") no-repeat right top; 

padding : 5px 6px 4px 1px; 

font-weight : bold; 

color : #808080; 

} 

#onglets a span {

float : none; 

} 

#onglets a:hover span {

color : #333; 

} 

#onglets #current a {

background-position : 0 -150px; 

border-width : 0; 

} 

#onglets #current a span {

background-position : 100% -150px; 

padding-bottom : 5px; 

color : #333; 

} 

#onglets a:hover {

background-position : 0% -150px; 

} 

#onglets a:hover span {

background-position : 100% -150px; 

}

Comment faire pour que l'affichage soit le même que sous IE ? (c'est à dire que le tableau s'affiche sous les onglets).

D'avance merci pour votre aide.

**EDIT Administrateur (TheRec)** Edition des liens morts et suppression de la marque à la demande de l'auteur.

Modifié 13 Janvier 2009 par TheRec

[Sentenza]

Salut,

apparement ton tableau se colle à tes onglets à cause du float:left;

Je pense que tu as deux solutions :

- un <br clear="all" /> dans ton html avant le tableau, ou

- un table { clear:both; } dans ta feuille de style (à privilégier pour du xhtml strict)

Modifié 14 Décembre 2006 par Sentenza

[le_fleau]

Salut et merci Sentenza

J'ai donc essayé la solution que tu me proposes, mais en fait, cela créé un autre problème sous firefox, le tableau a bien l'alignement horizontal que je cherche, mais il apparait à la fin de mes colonnes de droite et de gauche, donc assez bas :s : -http://www.site-exemple.com/home/sport-ligue1.html

**EDIT Administrateur (TheRec)** Edition des liens morts et suppression de la marque à la demande de l'auteur.

[karnabal]

Salut,

Pour ton tableau tu peux utiliser les commentaires conditionnels et placer ce code pour Firefox :

table { margin-top: -600px;}

[tom_sawyer]

Bonjour,

si tu fermes le div onglets après ton tableau c'est ok sous firefox

[le_fleau]

Bonjour et merci à vous deux Désolé de répondre aussi tard. Dans un premier temps, je vais appliquer la méthode de tom_sawyer, il faudrait que je fasse des ajustements tout de même pour que l'affichage soit similaire à celui que je recherchais. Je ne maîtrise pas les commentaires conditionnels et je ne sais pas comment en placer pour Firefox. Je rechercherais dans ce sens en rentrant de vacances

Merci en tous cas pour votre aide

Bonnes fêtes à tous !

Modifié 24 Décembre 2006 par le_fleau