probleme style peek a boo avec JS et CSS

Bon j'ai hesite a le mettre dans la section html/css, mais aparemment c'est lié à mon javascript quand meme alors le voila!
J'ai une liste d'images reparties dans des categories. quand on clique sur le titre de la catagorie les images apparaissent ou disparaissent. Ca marche tres bien sous firefox mais pas avec IE (version 6) : quand je clique il ne se passe rien, sauf quand si je redimensionne la fenetre apres, la mes images apparaissent! en revanche elles disparaissent bien quand je reclique...
(je poste ca ici car j'ai essaye en mettant les images d'abord 'cachee' par defaut, puis 'pasCachee' par défaut et les images s'affichaient bien...)

voila un bout du html (tous les bloc sont contenu dans une div tableau):

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
37
 
<div class='bloc'>
<div id='separateur' class='ligne' onclick='changer(this)'>Ma catégorie</div>
 
<div class='ligne' id='pasCachee'>
<div class='petiteCase'>6</div><!--fin de case-->
 
	  <div class='case'><img src='../images/petites/im6.jpg'/></div><!--fin de case-->
 
	  <div class='case'>im2.jpg</div><!--fin de case-->
 
	  <div class='case'>2006-08-30</div><!--fin de case-->
 
	  <div class='case'>0000-00-00</div><!--fin de case-->
 
	  <div class='petiteCase'>oui</div><!--fin de case-->
 
	  <div class='clearer'></div>
 
	 </div><!--fin de ligne-->
<div class='ligne' id='pasCachee'>
<div class='petiteCase'>7</div><!--fin de case-->
 
	  <div class='case'><img src='../images/petites/im7.jpg'/></div><!--fin de case-->
 
	  <div class='case'>im3.jpg</div><!--fin de case-->
 
	  <div class='case'>2006-08-30</div><!--fin de case-->
 
	  <div class='case'>0000-00-00</div><!--fin de case-->
 
	  <div class='petiteCase'>oui</div><!--fin de case-->
 
	  <div class='clearer'></div>
 
	 </div><!--fin de ligne-->
</div><!--fin de bloc-->

un bout de la 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
37
38
39
40
41
42
 
.tableau{
display:block;
margin:1em;
}
 
#lignetitre{
background-color:#eeeeee;
font-weight:bold;
}
 
.bloc{
display:block;
position:relative;
}
 
.ligne{
width:100%;
border-bottom-width:1px;
border-bottom-style:solid;
padding:0.2em;
}
 
#cachee{
display:none;
}
 
#pasCachee{
display:inline-block;
}
 
#highlight{
background-color:#ffff00;
}
 
/*separateur dans la liste d'images*/
#separateur{
background-color:#002277;
color:#eeeeee;
font-weight:bold;
text-indent:0.3em;
}

et le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function changer(maLigneTitre){
	monBloc=maLigneTitre.parentNode;
	mesLignes=monBloc.childNodes;
	nbLignes=mesLignes.length;
 
	for(i=0; i<nbLignes; i++){
		//je verifie que la ligne est un noeud element
		if(mesLignes[i].nodeType==1){
				//je verifie que ce n'est pas le separateur que je ne veux pas faire disparaitre
				if(mesLignes[i].getAttribute('id')!="separateur"){
						if(mesLignes[i].getAttribute('id')=="cachee"){
							mesLignes[i].setAttribute('id', 'pasCachee');
						}else{
							mesLignes[i].setAttribute('id', 'cachee');
						}
				}
		}
	}
}

merci!