Décalage de trop avec SAFARI

Bonjour à tous,

Je viens de créer un bloc contenant une image qui au survol de la souris la remplace par une autre avec un texte qui vient se caler par dessus.
voir ce post

ça fonctionne plutot bien avec les navigateurs sauf avec Safari (mac) qui décale un div contenant du texte vers le bas!
MAIS seulement au survol de la souris.

voici pour les savants, le code du bloc
<div id="div_evenement">
<a href="" class="mini">
 <h2 id="evenement" class="red">Titre H2</h2>
	<span><br />zsqjhdv dsdvqd dvdsvgqvd sdcqhsd s d dhscdhgqds dqscdgsqd sdsqdgs d qshgdhsqdc</span>
	<img src="image.jpg" alt="" border="0"/>
</a>
</div>

le code pour le div du titre H1

<div id="title_evenement"><span style="color:#C83C03">Titre H1</div>

et le css

.mini {
	background:url('image_dark.jpg');
	width:255px;
	height:219px;
	display:block;float:left;
	text-align:left;
}

a.mini h2.red {display:none;}
a.mini:hover h2.red{display:inline;}

a.mini span {display:none;}
a.mini:hover span{display:inline; color:#FFFFFF; font-size:12px; font-family:Arial, Helvetica, sans-serif; left:9px;}

a.mini img {display:block; }
a.mini:hover img{display:none;}
a.mini:hover {background-position: 0;}
a.mini:focus {background-position: 0;}
a.mini:active {background-position: 0;}

#div_evenement {
float:left;
margin:0 8px 0 0;
}
h2#evenement {
color:#FFFFFF;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin:8px 0 0 9px;
}
#title_evenement {
color:#000000;
position:absolute;
clear:left;
font-size:1.6em;
font-family:Arial Black, Helvetica, sans-serif;
margin:-26px 0 0 4px;
}

Quelqu'un a-t-il déjà rencontré ce problème?
comment le résoudre?

merci par avance de vos réponses

un coup pour rien!
J'ai trouvé la solution, il faut mettre le div du Titre H1 dans le div du bloc et jouer avec les margin. Tout simplement!

correction : un coup presque pour rien car j'ai tout de même une question. Comment donner un padding au span dans cet exemple?
Voici ce que ça donne dans cet exemple :


merci encore!

Bonjour,

En optant pour une syntaxe propre et surtout valide, tu éviteras beaucoup de prises de tête inutiles. L'élément a par exemple, ne peut contenir d'éléments de type bloc.

OK merci de l'info Benjamin

Mais si j'enleve le H2 de la balise A, le priblème des paddings reste le même.
Dans ce cas comment faire pour attribuer un padding à un span?
merci