Modification background sur H2 (JQuery)

Version imprimable

Bonjour à tous, je réalise en ce moment un "menu déroulant" avec ceci :http://flowplayer.org/tools/demos/tabs/accordion.html

Je l'ai quelque peu modifier, surtout le css que voici :
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 35 36 /* root element for accordion. decorated with rounded borders and gradient background image */ #accordion { margin-bottom: 30px; } /* accordion header */ #accordion h2 { padding: 4px 0 0 20px; height: 16px; background: url(../images/offres/Puce1_2.png) no-repeat; font-size: 12px; font-weight: normal; cursor: pointer; color: #047; } #accordion h2:hover { text-decoration: underline; } /* currently active header */ #accordion h2.current { cursor: default; background: url(../images/offres/Puce2_2.png) no-repeat; } /* accordion pane */ #accordion .pane { display: none; padding: 5px 0 5px 15px; font-size: 12px; } #accordion .pane li { list-style-image: url(../images/offres/puce3.png); }
Comme vous pouvez le voir lorsque je clique sur un titre je veux changer ma puce, cette transformation fonctionne parfaitement sous Firefox et sous Chrome, le seul hic est IE :cry:

Est ce que quelq'un pourrait m'aider à trouver une petite solution merci beaucoup et bonne fin de journée :D

21/03/2011, 21h18
Nesmontou
Bonjour,

Il nous faudrait un peu plus de détails pour pouvoir t'aider :
- Quelle est la version de IE ?
- Quel est le résultat sur ce navigateur ?
- ...
22/03/2011, 09h49
Tobear91

1 pièce(s) jointe(s)

Alors oui désolé, il s'agit de IE 7, le problème est le suivant. Je possède 2 puces, lorsque mon menu n'est pas déroulé la flèche est vert la droite et lorsqu'il est déroulé la flèche est vers le bas.

Sous FF et Chrome la flèche change bien d'apparence en fonction de la class que lui attribue le jQuery.

En revanche sous IE la flèche reste vers la droite. J'ai remarqué quelque chose, pour tester j'ai caché la première puce et lorsque je clique sur mon menu, la puce (vers le bas) apparaît bien. Il semblerais que la première puce ne veuille pas "s'effacer".

Pièce jointe 74804

Voilà, merci et bonne journée
23/03/2011, 12h14
Tobear91

Il s'avère qu'avec les différents menu accordéons que je test lorsque le menu est déroulé et donc actif, le css n'est pas pris en compte pour le changement ! :calim2:
23/03/2011, 12h23
Bisûnûrs

Y a pas de raison .. A mon avis c'est un problème Javascript et non CSS.

Peux-tu nous montrer la partie de ton code Javascript qui ajoute la classe en question ?
23/03/2011, 14h50
Tobear91

J'utilise JQuery donc je ne pense pas que ça provienne du code. Car en plus de ça j'ai beau utiliser différents accordéons j'ai toujours le même soucis
23/03/2011, 14h53
ornitho13

ce serait pas mal d'avoir un lien vers une démo.

De plus cela peut provenir de ton javascript, ce n'est parce que tu utilises jQuery qu'il ne peut pas y avoir d'erreur :)

Ca se présente sous cette forme la

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="accordion">
 
	<h2 class="current">First pane</h2>
	<div class="pane" style="display:block">... pane content ...</div>
 
	<h2>Second pane</h2>
	<div class="pane">... pane content ...</div>
 
	<h2>Third pane</h2>
	<div class="pane">... pane content ...</div>
 
</div>

Javascript :

Code:

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});

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
35
36
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	margin-bottom: 30px;
}
 
/* accordion header */
#accordion h2 {
	padding: 4px 0 0 20px;
	height: 16px;
	background: url(../images/offres/Puce1_2.png) no-repeat;
	font-size: 12px;
	font-weight: normal;
	cursor: pointer;
	color: #047;
}
 
#accordion h2:hover {
	text-decoration: underline;
}
 
/* currently active header */
#accordion h2.current {
	cursor: default;
	background-image: url(../images/offres/Puce2_2.png);
}
 
/* accordion pane */
#accordion .pane {
	display: none;
	padding: 5px 0 5px 15px;
	font-size: 12px;
}
 
#accordion .pane li {
	list-style-image: url(../images/offres/puce3.png);
}

Dans le #accordion h2.current un background-color fonctionne alors qu'un background simlpe avec une url ne fonctionne pas