28173 sujets

CSS et mise en forme, CSS3

J'essaye d'utiliser un menu deroulant. Pour ne pas utiliser display:none ( accessibilité) je passe par des myDiv.style.left = '-1999em'; ou myDiv.style.left = 'auto';. Le souci, d'est que j'ai un probleme de rafraichissiment de mes images avec IE.
http://spiral.univ-lyon1.fr/8-basedonnéemedia/test5.asp
Auriez vous une idée ??

<style type="text/css">
li{
list-style: none;
border:1px solid  #fff;
list-style-position: outside;
}

ul {
list-style:none; 
border:1px solid  #fff;
margin-left: 10px; 
padding-left : 10px;
/*border : 1px solid #FF0000;*/
}
.tools_on{
background  : #EEEEEE ;
background-image : url("../imagesV2/icones/suivant_bleu.gif");
background-repeat:no-repeat ;
background-position:right ;
/*cursor:pointer ;*/
}


.tools_out{
background  : #FFFFFF ;
}



.dossier {
margin-left : 0px ;
margin-right : 0px ;
margin-top : 3px ;
border : 0px ;
}

</style>

<script  type="text/javascript">

function Affiche_dossier( id_div ) {

	myDiv = document.getElementById('folder'+id_div);
	myssDiv = document.getElementById('div'+id_div);
	myIcon = document.getElementById('icon'+id_div);
	if (myDiv) {
		if (myDiv.style.left == '-1999em' )  {
			myIcon.src='../14-ue/images/icon_moins.gif';
			myDiv.style.left = 'auto';			
			myDiv.style.position ="relative" ;
		//	myssDiv.className='tools_on';
		//	myssDiv.className='tools_on';
		//	myDiv.style.position ="relative" ;

		}
		else {
			myDiv.style.left = '-1999em';
			myDiv.style.position ="absolute" ;
			myIcon.src='../14-ue/images/icon_plus.gif';
			
		}
	}

}
</script>




</head>

<body>

<div style="float:left; width:300px; border: 1px solid #000000; height:600px;overflow:auto;">
<ul ><li><a href='#'  onclick='lance_affichege_fichier(0); ' ><img style='margin-left:-10px;border:0px;' src='./images/disque.gif'  alt='dossier' />&nbsp;Racine</a></li>	
		<li><div  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">	
		<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(3)" id="icon3" alt="deplier"  />
		

		<img  class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(3);"    > 1</a></div></li>	
		<li><ul  id="folder3" style="left:-1999em; position:absolute ;">
		<li><div id="div3"  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
		
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
		

		<img class="dossier" src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(4);" >1,1</a></div></li>	
		<li><div  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden"  alt="déplier" />
		

		<img  class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(5);"    > 1,2</a></div></li></ul></li>
		<li><div    class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >	
		<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(6)" id="icon6" alt="deplier"  />
		
		<img class="dossier"  src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(6);" > 2</a></div></li>	
		<li><ul  id="folder6" style="left:-1999em; position:absolute ;">
		<li><div id="div6"  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
			
		<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(7)" id="icon7" alt="deplier"  />		
		

		<img class="dossier" src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(7);" >2,1</a></div></li>	
		<li><ul  id="folder7" style="left:-1999em; position:absolute ;">
		<li><div id="div7"  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
		
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
		

		<img class="dossier" src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(8);" >2,1,1</a></div></li>	
		<li><div  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">	
		<img src="../14-ue/images/icon_plus.gif" onclick="Affiche_dossier(9)" id="icon9" alt="deplier"  />
		

		<img  class="dossier" src="./images/disque.gif" alt="dossier" /> <a href="#" onclick="lance_affichege_fichier(9);"    > 2,1,2</a></div></li>	
		<li><ul  id="folder9" style="left:-1999em; position:absolute ;">
		<li><div id="div9"  class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';">
		
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden" alt="déplier" />
		

		<img class="dossier" src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(10);" >2,1,2,1</a></div></li></ul></li>
		<li><div    class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden"   alt="déplier"/>
		
		<img class="dossier"  src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(11);" > 2,1,3</a></div></li></ul></li></ul></li>
		<li><div    class="tools_out" onmouseover="this.className='tools_on';" onmouseout="this.className='tools_out';" >
		<img src="../14-ue/images/icon_plus.gif" style ="visibility:hidden"   alt="déplier"/>
		
		<img class="dossier"  src="./images/disque.gif" alt="dossier"  /> <a href="#" onclick="lance_affichege_fichier(12);" > 3</a></div></li></ul>
</div>