Problème de CSS avec Firefox ... [Résolu]

Signaler
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013
-
Salut à tous !
Alors voilà ... Là, y a un truc que je comprends pas. J'ai codé tout une page en faisant bien attention à respecter toutes les règles du W3C ... Et pourtant ça tourne pas sous Firefox, alors qu'il n'y a aucun problème sous Internet Explorer. Je ne comprends plus ! Mais que ce passe-t-il ?
Voici un [centromere.free.fr/StockEisti/index.html lien] vers la page qui me pose problème. C'est un peu le bazar au niveau du code parce que j'en suis encore aux tests et aux essais. Mais ça n'empêche pas que si quelqu'un pourrait m'aider, ce serait vraiment sympa.
Merci beaucoup !
LocalStone

5 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
B

onjour...
Les corrections sont en rouge

#head{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 100px;
  background-image: url('head_left.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #000000;
  font-family: Georgia;
  color: #FFFFFF;
  font-size: 11px;
}

#foot{
  position: absolute;
  left: 0px;
  width: 500px;
  height: 50px;
  background-color: #000000;
  background-image: url('foot_right.png');
  background-repeat: no-repeat;
  background-position: right center;
}
#left div{
<strike>  width: 100%;</strike>
  height: 100%;
  background-image: url('left_top.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-color: transparent;
  padding: 5px;
  text-align: right;
}
#head div{
  width: 100%;
  height: 100%;
  background-image: url('head_right.png');
  background-repeat: no-repeat;
<strike>  background-position: left middle;</strike>
  background-color: transparent;
  padding: 5px;
}
#foot div{
  width: 100%;
  height: 100%;
  background-image: url('foot_left.png');
  background-repeat: no-repeat;
<strike>  background-position: left;</strike>
  background-color: transparent;
  padding: 5px;
}

Il me semble que c'est tout pour que cela fonctionne ...

Nota:
  la console Javascript de FireFox te permet de récupérer un certains nombre d'erreur même concernant le style.




;0)
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Le lien, c'est http://centromere.free.fr/StockEisti/index.html. Je sais pas pourquoi celui du dessus n'a pas marché ...
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,

je me permet de faire une petite remarque.
J'ai regardé ta page source et j'ai vu que tu utilisais du javascript pour positionner chaque élément.
Je ne comprend pas l'objectif, sachant que tout ça peut être géré via css.

Nickadele
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Déjà, merci à toi PetrolTeam. Y avait d'autres problèmes (surtout liés à l'interprétation du padding différente sous IE ou sur FF), mais maintenant, ça marche. J'ai posté la version qui fonctionne. Encore merci, parce que tu m'as pas mal aidé.
Ensuite, pour répondre à ta question Nickadele ... Bah le problème, c'est que j'arrive pas en CSS à faire ce que je fais avec le Javascript. Ce ne sera pas faute d'avoir essayer avec des float left et j'en passe et des meilleurs, mais à chaque fois, il y a quelque chose qui n'allait pas. Du coup, j'utilise en plus du CSS un peu de Javascript.
Maintenant, si tu peux me proposer un truc fait qu'avec du CSS qui fait exactement la même chose ... Ha bah là, je suis preneur !!
++ !
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Re,

j'ai pas trop le temps, sinon ce serait avec plaisir.
Par contre si ça t'intéresse voici un lien qui te premettra d'avoir un max de solutions face au problèmes des DIV.
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle