[css] Ff != Ie

**diaboloche** · 13/06/2007, 11h31

Bonjour,

J'ai ceci dans mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

FF:

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

Merci et bonne journée.

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

display:block;

**new-dmx** · 13/06/2007, 13h41

C'est a dire??? (j'ai les memes problemes)

**Bisûnûrs** · 13/06/2007, 13h42

Envoyé par new-dmx

C'est a dire???

Qu'est-ce que tu ne comprends pas ?

**new-dmx** · 13/06/2007, 13h59

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

**Bisûnûrs** · 13/06/2007, 14h08

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.

**diaboloche** · 13/06/2007, 15h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Deallyra** · 13/06/2007, 16h13

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

**diaboloche** · 18/06/2007, 11h09

Bonjour,

Je récapitule...

Voici mon Doctype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

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.