[css] Ff != Ie

Version imprimable

[css] Ff != Ie

Bonjour,

J'ai ceci dans mon CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 a.box { Text-Transform: Uppercase; Text-Align: Center; width: 110px; font-size: 12px; padding: 0x; margin: 0px; background-color: WHITE; text-decoration: none; color: #969696; font-family: Arial, Helvetica, sans-serif; } a.box:hover { color: WHITE; background-color: ORANGE; }
A l'affichage sous IE j'ai ceci (résultat voulu) :
http://www.imagup.info/images/member/1181727618_ie.gif

FF:
http://www.imagup.info/images/member/1181727585_ff.gif

Quelqu'un peut m'indiquer comment résoudre cela ?

Merci et bonne journée.

13/06/2007, 11h57
Bisûnûrs

Tu n'es pas censé pouvoir donner une taille à un élément inline.

Si tu renseignes un DOCTYPE valide et complet, IE en mode standard et non en mode quirks interprêtera de la même manière que Firefox.

Tu peux passer ton élément inline en block :

Code:

display:block;
13/06/2007, 13h41
new-dmx

C'est a dire??? (j'ai les memes problemes)
13/06/2007, 13h42
Bisûnûrs

Citation:

Envoyé par new-dmx

C'est a dire???

Qu'est-ce que tu ne comprends pas ?
13/06/2007, 13h59
new-dmx

Citation:

Tu n'es pas censé pouvoir donner une taille à un élément inline.

Qu'est ce que tu entend par element inline?
En faite j'ai definit une zone avec des balises div, je lui ai donner une taille.
Sous ff la zone apparait a une certaine taille, sur ie la zone apparait avec une autre taille....
merci
13/06/2007, 14h08
Bisûnûrs

Les éléments de type inline sont par exemple les balises a, span, img,.. toutes celles qui n'imposent pas un retour à la ligne quand on les utilise sans style particulier.

En ce qui concerne ton div qui est un élément de type block, si en lui précisant la taille tu n'arrives pas au même résultat sur IE et sur Firefox, tu n'as sans doute pas mis un DOCTYPE valide et complet et tu as un padding dans ce div.
En effet, en mode quirks, Firefox additionne ce padding à la taille donnée du div alors que IE non.

Exemple : Tu as un div de 100px de large et un padding de 5px de chaque côté, IE6 en mode quirks t'affichera 100px alors que Firefox t'affichera 110px.
13/06/2007, 15h50
diaboloche
Merci de ta réponse.
J'ai adapté pour inclure tout ça dans des <div>...
J'essaye de trouver un DOCTYPE valide... mais pour le moment j'ai toujours des résultats différents de FF à IE... j'aimerais que cela ne soit plus le cas...
Code:

1 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Je ne comprends pas trop ce que ça veut dire... j'ai du mal à choisir quelques choses de correct :?
13/06/2007, 16h13
Deallyra

Il manquerait pas quelque chose au DOCTYPE comme Strict ou Transitional?

Bonjour,

Je récapitule...

Voici mon Doctype
Code:

1 2 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Et mon CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 div.Box { width: 110px; background-color: WHITE; } div.Box:hover { width: 110px; background-color: ORANGE; } a.Titre { Text-Transform: Uppercase; Text-Align: Center; width: 110px; font-size: 12px; padding: 0x; margin: 0px; text-decoration: none; color: #969696; font-family: Arial, Helvetica, sans-serif; } a.Rubrique { Text-Transform: Uppercase; Text-Align: Center; width: 110px; font-size: 10px; padding: 0x; margin: 0px; text-decoration: none; color: #969696; font-family: Arial, Helvetica, sans-serif; }
Et je n'ai pas les mêmes résultats sous FF et IE (rolover qui ne fonctionne pas sous IE, centrage du texte absent sous FF, ...) ... donc selon vos explications, à cause du DOCTYPE... Comment puis-je dans un premier temps régler ce problème avant de 'attaquer aux autres problèmes...

Merci d'avance...

Bonne journée.

18/06/2007, 11h25
Bisûnûrs

Pour ton premier problème, la pseudo-classe hover n'est reconnue sur IE uniquement sur des liens.

Pour ton deuxième problème je te renvoie à mon premier post.
18/06/2007, 11h38
diaboloche

Donc mon Doctype n'est pas adéquat...

J'essaye d'en trouver un qui fonctionne...
18/06/2007, 11h42
Bisûnûrs

Ben si ton DOCTYPE est adéquat ..

Dans mon premier post je dis :

Citation:

Envoyé par Bisûnûrs

Tu n'es pas censé pouvoir donner une taille à un élément inline.

Comportement normal après avoir renseigné un DOCTYPE complet et valide.

Dans mon premier post je dis aussi :

Citation:

Envoyé par Bisûnûrs

Tu peux passer ton élément inline en block

Qui est la solution à ton problème.
18/06/2007, 11h46
diaboloche

Ok... Excuse moi je n'ai pas saisi tout de suite.

Merci.
18/06/2007, 16h39
DanielCosta

Citation:

Envoyé par MimiCracra44

Il manquerait pas quelque chose au DOCTYPE comme Strict ou Transitional?

Non car il a un doctype pour du xHTML 1.1 et non 1.0 ;)
18/06/2007, 16h40
diaboloche

Citation:

Envoyé par DanielCosta

Non car il a un doctype pour du xHTML 1.1 et non 1.0 ;)

Rolalala... j'ai vraiment du mal à savoir ce que je dois mettre :?