Surlignement d'une image cliquable, souci

Bonjour,

J'ai crée dans un espace compte des images cliquables donc comme ceci "<a href="#"><img ... /></a>". Mon problème est que je souhaite que l'image et l'intitulé du lien soient soulignés. Sous Firefox impec sous IE ça ne va pas.

code css de la page :

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: normal 82%/200% "Trebuchet MS", helvetica, sans-serif ;
	background: #dea ;
}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

h1#header
{
	height: 258px ;
	background: url("../Images_site/pellicule.png") no-repeat right top ;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 150px ;
	display: block ;
	background: url("../Images_site/titre_site.png") no-repeat ;
	position: relative ;
	left: 10px ;
	top: 15px ;
	text-indent: -5000px ;
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	background: url("../Images_site/fond_menu.png") repeat-x 0 -25px ;
}

ul#menu li
{
	display: inline ;
	margin-right: 1px ;
}

ul#menu li a
{
	padding: 0 20px ;
	border-right: 1px solid #600 ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	text-align: center ;
	text-decoration: none ;
	color:#000000 ;
}

ul#menu li a:hover
{
	text-decoration: underline ;
}

div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(little_apple.gif) no-repeat left bottom ;
	color: #9b2 ;
	border-bottom: 1px solid #9b2 ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #000000 ;
}

div#contenu a:hover
{
	color: #999999 ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}

#bulle
{
	float:left ;
	margin:5px ;
	width:250px ;
	border: 1px solid #999999 ;
	padding: 10px ;	
}

#navigation {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	}
	
#navigation li {
	float: left ;
	width: 150px ;
	border: 1px solid #600 ;
	margin-right: 1px ;
	color: #fff ;
	background: #c00 ;
	}
	
#navigation li a {
	display: block ;
	background: #c00 ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
	text-align: center ;
	}
	
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #900 ;
	}

label,input {
	display: block;
	width: 150px;
	float:left;
	margin-bottom: 10px;
}

label {
	text-align: left;
	width: 190px;
	padding-right: 20px;
}

br {
	clear: left;
}

#nav, #nav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* tous les items de liste */
	float: left;
	width: 10em; /* largeur obligatoire, sinon opera devient fou */
}

#nav li ul { /* listes de deuxième niveau */
	position: absolute;
	padding:8px;
	border-top:1px solid #CCCCCC;
	background: white;
	width: 10em;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}

table {
	border:#CCCCCC 1px solid;
	width:auto;
	text-align:center;
}

td,tr {
	padding:10px;
}

capture sous Firefox:
http://perso.orange.fr/photosdestef/firefox.JPG

Capture sous Internet explorer :
http://perso.orange.fr/photosdestef/ie.JPG

Cela étant un espace sécurisé, je ne peux pas mettre cette page en ligne.

Merci pour toute aide.

Bonjour !

Idée stupide:

<a href="#"><img ... />Texte</a>

Captain Ishido a écrit :
Bonjour !

Idée stupide:

<a href="#"><img ... />Texte</a>

bonjour,

ça ne va pas beaucoup m'aider .

Hello,

Peut-être que ceci peut t'aider, alors:
http://web.covertprestige.info/test/25-soulignement-image-dans-lien.html
(Rédigé à l'instant pour tes beaux yeux d'extraterrestre. )

Je n'ai pas tenté tout ce qui me passait par la tête mais pas loin, et la réponse est: pas possible d'avoir le même type de soulignement dans tous les navigateurs.
Modifié par Florent V. (09 Aug 2007 - 19:34)

C'est bon, je me suis penché pour une autre méthode en changeant de mise en page et tout marche au poil !

En tout cas merci Florent c'est vraiment sympa pour ton aide.
J'apprécie beaucoup.

++