CSS et mozilla

bonjour à tous.
les problèmes avec mozilla continu: j'utilise une feuille CSS pour la mise en forme de mon site (lien, police, bouton, etc...) et cela fonctionne parfaitement sous ie, mais pas sous mozilla... comment puis-je faire ?

Montre ton code pour voir ?

ok

par exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

/* LIENS NORMAUX */ A.normal:link {text-decoration: none; color: #2F2E3E; } A.normal:visited {text-decoration: none; color: #2F2E3E; } A.normal:active {text-decoration: none; color: #2F2E3E; } A.normal:hover {text-decoration: underline; color: #2F2E3E; }   /* LIEN CLAIR */ A.clair:link {text-decoration: none; color: #E6EAF6; } A.clair:visited {text-decoration: none; color: #E6EAF6; } A.clair:active {text-decoration: none; color: #E6EAF6; } A.clair:hover {text-decoration: underline; color: #E6EAF6; }

---

et dans la page :

Code:

---

<a href="?page=news" class=normal>cliquez-ici pour acceder aux news</a>

---

j'ai vu que dans la "nouvelle" version de dreamweaver, il mettait plutot :

Code:

---

<div class=normal><a href="?page=news">cliquez-ici pour acceder aux news</a></div>

---

quelles différences ?

bonjour,

Plusieurs choses :
1-ta feuille de style ne s'applique qu'aux balises <a > dont l'attribut class a les valeurs "normal" ou "clair". Donc ton style ne s'appliquera pas au code

Code:

---

1 2 3

<div class=normal><a href="?page=news">cliquez-ici pour acceder aux news</a></div>

---

car c'est un div qui appelle la classe normal (ceci dit en passant j'écrirais class="NomClasse", avec les "").

2-Dans ce cas tu n'est pas obligé de préciser le nom de la balise devant la classe :

Code:

---

1 2	.normal:link {text-decoration: none; color: #2F2E3E; }

---

3-Sous IE, les pseudos classes :hover, :link, :visited ... ne fonctionnent que pour la balise <a>

4-Néanmoins, si tu souhaites utiliser la notation employée dans la feuille de style, je pense qu tu devrais mettre un a minuscule (car cela se réfère à une balise <a> et non à une balise <A> ):

Code:

---

1 2 3

a.normal:link {text-decoration: none; color: #2F2E3E; }

---

1- oui, tu as raison, je n'ai pas été clair :)
en plus, j'ai fait une erreur, désormais, dreamweaver met des <span class=""> partout (et non pas des div)... mais ce qui revient au même dans la feuille de style.

2- on est d'accord.

3- et sous mozilla ?

4- c'est fait, mais ca ne marche toujours pas. :cry:
ce qui est bizarre, c'est qu'une fois le lien activé, il n'est plus souligné.

Citation:

---

Envoyé par NILUjE

3- et sous mozilla ?

---

sous Firefox tu utilsier la classe hover avec des balises comme div par exemple

Citation:

---

Envoyé par NILUjE

4- c'est fait, mais ca ne marche toujours pas. :cry:
ce qui est bizarre, c'est qu'une fois le lien activé, il n'est plus souligné.

---

Code:

---

1 2	.normal:active {text-decoration: none; color: #2F2E3E; }

---

Citation:

---

Envoyé par Auteur

Code:

---

1 2	.normal:active {text-decoration: none; color: #2F2E3E; }

---

---

oui, mais

Code:

---

.normal:link {text-decoration: none; color: #2F2E3E; }

---

et pourtant, les liens sont soulignés !

ah bon ?

avec

Code:

---

1 2	<a href="page.htm" class="normal">Mon lien</a>

---

le lien n'est souligné uniquement lors du "hover" (IE et Firefox).

Une parenthèse vite fait : Le paradoxe vient du fait que l'on doit d'abord se préocupper d'IE en raison du nombre d'utilisateur, alors que ce sont les autres navigateurs qui gèrent correctement les css. Du moins mieux qu'IE.

Citation:

---

Envoyé par psychoBob

Une parenthèse vite fait : Le paradoxe vient du fait que l'on doit d'abord se préocupper d'IE en raison du nombre d'utilisateur, alors que ce sont les autres navigateurs qui gèrent correctement les css. Du moins mieux qu'IE.

---

C'est ton choix, mais personellement je prefere faire mon css bien propre pour ff et autres et faire une rustine pour IE par la suite soit avec des hacks soit un css conditionel.

au niveau du probleme sur les liens ca me parait pas sorcier:
soit tu as ta class direct sur tes liens et tu as

Code:

---

1 2 3 4 5 6 7

/* LIENS NORMAUX */ a.normal:link, a.normal:visited { text-decoration: none; color: #2F2E3E; } a.normal:hover, a.normal:active { text-decoration: underline; color: #2F2E3E; }   /* LIEN CLAIR */ a.clair:link, a.clair:visited {text-decoration: none; color: #E6EAF6; } a.clair:hover, a.clair:active {text-decoration: underline; color: #E6EAF6; }

---

Code:

---

1 2	<a href="#" class="clair">link clair</a><br /> <a href="#" class="normal">link normal</a>

---

soit tu l'as sur une balise parente (div,span,p ...)

Code:

---

1 2 3 4 5 6 7

/* LIENS NORMAUX */ .normal a:link, .normal a:visited { text-decoration: none; color: #2F2E3E; } .normal a:hover, .normal a:active { text-decoration: underline; color: #2F2E3E; }   /* LIEN CLAIR */ .clair a:link, .clair a:visited {text-decoration: none; color: #E6EAF6; } .clair a:hover, .clair a:active {text-decoration: underline; color: #E6EAF6; }

---

Code:

---

1 2	<div class="clair"><a href="#">link clair</a></div> <div class="normal"><a href="#">link normal</a></div>

---