Afficher / Masquer des éléments sans javascript

Bonjour à toutes et tous,

D'abord merci à Alsacreations de fournir autant de bons tutos pour les newbies dans mon genre...

Ensuite je me retrouve devant un petit soucis avec ce tuto...

Le soucis est que IE6 n'affiche pas les légendes qui apparaissent correctement dans IE7 et Firefox lors du survole des images...

Voici la page en question, ci-dessous le morceau du css :

#subMenu{
	width:520px;
	height:105px;
	margin:16px 0 0 180px;
	}
		#subMenu ul{
		height:auto;
		margin:0;
		padding:0;
		}
			#subMenu li{
			display:block;
			float:left;
			height:57px;
			width:84px;
			margin:0 10px 0 0;
			}
			
			#subMenu li a{
			display:block;
			height:57px;
			width:84px;
			text-decoration:none;
			}
			
			#subMenu li a:hover{
			background:none;
			}
			
			#subMenu li a span{
			display:none;
			}
			
			#subMenu li a:hover span{
			font-size:0.7em;
			color:#000;
			display:block;
			position:relative;
			top:45px;
			text-align:left;
			height:65px;
			width:84px;
			}
			
			li#cafeschauds a{
			background:url(images/cafeschauds.jpg) no-repeat 0 0;
			}
				li#cafeschauds a:hover{
				background:url(images/cafeschauds_over.jpg) no-repeat 0 0;
				}
			
			li#cafesfroids a{
			background:url(images/cafesfroids.jpg) no-repeat 0 0;
			}
				li#cafesfroids a:hover{
				background:url(images/cafesfroids_over.jpg) no-repeat 0 0;
				}
			
			li#boissonschaudes a{
			background:url(images/boissonschaudes.jpg) no-repeat 0 0;
			}
				li#boissonschaudes a:hover{
				background:url(images/boissonschaudes_over.jpg) no-repeat 0 0;
				}
			
			li#softs a{
			background:url(images/softs.jpg) no-repeat 0 0;
			}
				li#softs a:hover{
				background:url(images/softs_over.jpg) no-repeat 0 0;
				}
			

et enfin la partie du code html :

 <div id="subMenu">
    	<ul>
        <li id="cafeschauds"><a href="#">&nbsp;<span>Cafés chauds</span></a></li>
        <li id="cafesfroids"><a href="#">&nbsp;<span>Cafés froids</span></a></li>
        <li id="boissonschaudes"><a href="#">&nbsp;<span>Boissons chaudes</span></a></li>
        <li id="softs"><a href="#">&nbsp;<span>Softs</span></a></li>
        </ul>
    </div>

Si ce n'est pas clair, dites-le moi ! Merci d'avance !

Bonjour,

La méthode employée ici n'a pas un grand intérêt. Tu pourrais réaliser cet effet beaucoup plus simplement avec des liens:
1. en display: block;
2. avec une image de fond (et une autre au survol);
3. ayant un padding-top équivalent à la hauteur de l'image de fond;
4. avec du texte en blanc par défaut, et plus sombre au survol ET au focus.

Actuellement, tu as des liens dont les intitulés sont dans des éléments SPAN en display:none. Ce qui pose un gros problème d'accessibilité, car la plupart des lecteurs d'écran ne liront pas cette information. Ça pose aussi un problème ergonomique: rien ne dit à l'utilisateur que ces images sont cliquables, il faut explorer l'interface avec la souris pour s'en rendre compte, ce qui est loin d'être optimal. Conserver le texte visible serait plus pertinent de ce point de vue.