Discussion :

[boutmos]

Bonjour,

J'ai besoin d'utiliser une double classe pour différencier mes 2 types d'éléments.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="...." class="toolTipRubrique" title="...">
	<div class="itemicones folder">
		<div class="dossier"></div>
		<div class="titre">Action Sociale</div>
	</div>
</a>
 
<a href="...." class="toolTipArticle" title="...">
	<div class="itemicones arti">
		<div class="article"></div>
		<div class="titre">Action Sociale</div>
	</div>
</a>

lorsque je fais :

Code :

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

1
2
 
a:hover .itemicones.folder {...}

çà fonction mais sous ie6, j'ai l'impression qu'il m'execute : a:hover .folder, et donc çà a un impact sur d'autres morceaux de code tels que :
a:hover .itemliste.folder, a:hover .itemdetail.folder

[Ethyde]

Bonjour,

Internet Explorer 6 ne comprend pas la sélection de classes multiples en CSS : il ne prend en compte que la dernière classe.

Source : http://www.lesintegristes.net/2008/0...et-background/

[boutmos]

Ouep c'est bien ce que j'ai trouvé aussi dans mes recherches.

j'ai bien pensé a une combinaison Id+Class mais bon, les éléments que j'utilise ne sont pas unique.

Je n'ai pas non plus envie de restructurer tout mon CSS/XHTML

Avez vous deja etait confronté à ce probleme et comment l'avez vous fixé ?

Merci

[CCyrillus]

bonjour,

Il y a aussi qu'il faut provoqué un genre de reflow sur la balise a a l'évènement :hover , pour que les styles soit pris en compte .

Il est facile de jouer sur la valeur de background par exemple .

Puis , hors sujet , on ne met pas de div dans un lien , mais des span en display:block; ça passe bien .

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="...." class="toolTipRubrique" title="...">
	<span class="itemicones folder">
		<span class="dossier"></span>
		<span class="titre">Action Sociale</span>
	</span>
</a>
 
<a href="...." class="toolTipArticle" title="...">
	<span class="itemicones arti">
		<span class="article"></span>
		<span class="titre">Action Sociale</span>
	</span>
</a>

ex:

Code :

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

1
2
3
a:hover {background:none;}
span span {display:block;}
a:hover .itemicones.folder {color:red}

cordialement

<edit>
Pour etre un peu plus précis , il faut forcé IE6 a rafraichir les styles .
1) on peut donc forcé un reflow sans incidence notable sur le rendu:
Pour le reflow sur :hover :
line-height(ex :1.2em , border(ex:none) , background(ex:none) , padding:0.01pt ,margin:0.01pt , height ou width 1% (si display est inline), font-family (differente) , etc ...

Le principe est de redefinir une regle d'affichage par defaut sur a:hover non précisé ou differentes sur a , a:link .

Pour le background par exemple : pour le rouge on peut le definir de plusieurs façon : red , #ff0000 , rgb(100%, 0%, 0%) , rgb(255, 0, 0) .
Ce qui ne change en rien la couleur de fond pour l'utilisateur , mais qui est "différente' pour le navigateur.


2) ou etre plus agressif en jouant sur le "layout" , qui va franchement modifier le comprtement et ne pas etre adapté a la plupart des cas.
Pour le haslayout:
writing-mode:lr-tb , zoom:1 , display:inline-block , etc ...

[b]P.S. en Pour les multiclass , je n'ai jamais remarqué que IE6 ne les implémenter pas .
<A> est difficile a styler dans IE6 , les 'selecteurs' et l'heritage CSS , les bugs d'affichage de cette balise et les effets du layout , font que l'ont y perd son latin , mais avec un peu de rigueur et d'observations , il est possible d'arriver a ses fins . augmenter le poids des sélecteur est une première piste.
</edit>

[boutmos]

ok merci bcp pour ton aide =D

[Candygirl]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="...." class="toolTipRubrique" title="...">
	<div class="itemicones folder">
		<div class="dossier"></div>
		<div class="titre">Action Sociale</div>
	</div>
</a>
 
<a href="...." class="toolTipArticle" title="...">
	<div class="itemicones arti">
		<div class="article"></div>
		<div class="titre">Action Sociale</div>
	</div>
</a>

Hello,

Au vu de ton exemple, as-tu vraiment besoin de spécifier une autre classe ? Ne pourrais-tu pas te contenter de les différencier de la sorte ? :

Code :

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

1
2
.toolTipRubrique .itemicones { }
.toolTipArticle .itemicones { }