Positionnement de liens avec la propriété display

Bonjour,

Je voudrais afficher 2 liens, centré sur l'écran, avec des images :
Voilà le code html :

<div id="splash">
<p>
        <a href="#" class="splash_link_fr_FR"><span>Français</span></a>
<img src="{$j_basepath}img/splash_bull.png" alt="•" />
<a href="#" class="splash_link_en_EN"><span>English</span></a>
    </p>
</div>

et le code CSS :

#splash {
    margin-top: 175px;
    text-align: center;
}
#splash p {
    margin-top: 70px;
}
.splash_link_fr_FR span ,
.splash_link_en_EN span {
    display: none;
}
.splash_link_fr_FR {
    background: url('/img/fr_FR/splash_link.png') no-repeat;
    width: 108px;
    height: 17px;
    display: inline-block;
}
.splash_link_fr_FR:hover {
    background: url('/img/fr_FR/splash_link-hover.png') no-repeat;
}
.splash_link_en_EN {
    background: url('/img/en_EN/splash_link.png') no-repeat;
    width: 85px;
    height: 17px;
    display: inline-block;
}
.splash_link_en_EN:hover {
    background: url('/img/en_EN/splash_link-hover.png') no-repeat;
}

Je n'affiche pas le contenu des <span>, pour remplacer le tout par des images (avec son :hover). Le tout en display: inline-block car sinon les 2 liens ne sont pas centrés.

Le problème est que ça ne fonctionne pas avec Firefox 2 où les liens n'apparaissent même pas... Comment je peux faire pour que ça s'affiche correctement partout ?

Merci beaucoup !
Modifié par Surfoo (31 Jan 2009 - 10:44)

Bonjour,

Ça ne peut pas fonctionner avec Firefox 2 car Firefox 1-2 n'implémente pas display: inline-block. Tu peux éventuellement lire ceci: http://covertprestige.info/test/40-display-inline-block.html (Mais la solution suggérée pour FF2 est casse-gueule et je la déconseille.)

La solution ici consiste à placer les images dans les liens, dans le code HTML, avec un texte alternatif qui va bien. Avantage: beaucoup plus accessible que la solution actuelle, qui rend le texte invisible par un lecteur d'écran, invisible si l'image de fond n'est pas chargée pour une raison X ou Y, etc.). Inconvénient: il faudra gérer l'effet de survol de manière classique, en JavaScript (ce qui n'est pas un problème en soi, mais ça fait toujours bizarre quand on a oublié d'apprendre les bases de JS ).