Aller au contenu

Mauvais positionnement sous FF


le_fleau

Sujets conseillés

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) :

ieud9.th.gif

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

firefoxad4.th.gif

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é par TheRec
Lien vers le commentaire
Partager sur d’autres sites

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é par Sentenza
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

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é par le_fleau
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...