Border Safari

Bonjour à tous !
Ravi d'être sur ce forum voici ma question. Je n'ai pas vraiment trouvé de réponse. J'ai réalisé un site pour un client sur lequel il y a des boutons ronds (j'aime pas mais j'ai pas choisi !) et le problème sur Safari c'est qu'il y a un cadre qui s'affiche autour des boutons, ce qui n'est pas très heureux ! Donc ma question c'est, comment ne pas voir ces cadre sur Safari (sachant qu'il n'apparaissent pas sur Firefox, tant qu'on ne clique pas dessus). J'ai bien mis "border : none" sur mon bouton mais ça ne change rien. Voilà. Si vous pouvez m'aider, merci d'avance !

Bonjour,

Aucune idée de la raison du problème. Mais si on pouvait voir la page en ligne et la tester directement, ça aiderait bien.
À défaut, je te conseille fortement d'utiliser l'outil Web Inspector intégré à Safari pour savoir quels sont les styles CSS qui s'appliquent à tes éléments (image, lien), y compris les styles par défaut du navigateur.

Voilà le lien provisoire :
http://www.adamantium.fr/dhdt/

Merci

Depuis le temps que je développe sous Safari, c'est bien la première fois que je vois ça.

Tout semble normal, pourtant... La seule info qu'on ait c'est que cette pseudo-bordure a pour couleur #c0c0c0, ou rgb(192,192,192). Regarde dans ton code si tu trouves quelque chose qui a cette couleur...

--- édit -----
Quelque chose qui pourrait être intéressant aussi, c'est de remplacer ces <img /> par des <div>, histoire de voir si c'est lié au type de balise ou non (un peu comme les premières versions de Firefox qui ajoutaient par défaut une bordure rouge aux images).
Modifié par phpdoesnotcare (26 Apr 2010 - 12:45)

Bon ben c'est simple, tu as le code suivant:

<img width="118" height="120" class="button3" alt="" />

Il n'y a aucune image à afficher, mais tu demandes quand même des dimensions précises. Le fonctionnement de Safari dans ce cas est d'afficher un cadre aux dimensions demandées, avec une bordure grise, dans laquelle il va afficher le contenu de l'attribut alt s'il y en a un.
Solution: ne pas utiliser une «fausse image» de la sorte.

Plus globalement, ton menu n'est pas accessible car l'information (intitulé des liens) n'est pas donnée. Tu pourrais éventuellement faire ce que recommande phpdoesnotcare (remplacer <img> par un <div>, sauf qu'un <div> ne sera pas valide donc plutôt un <span> ), utiliser un texte pour chaque lien dans le code HTML, et masquer ce texte en CSS d'une manière ou d'une autre pour laisser s'afficher uniquement ton image de fond. Ça serait moins pire que l'existant, mais ça reste inaccessible (en cas de désactivation ou non chargement des images, le menu disparait).

La technique accessible consiste à utiliser de vraies images avec un attribut alt qui va bien:

<img width="118" height="120" src="images/bouton03.png" alt="Improvisation jonglée" />

L'effet de rollover peut se faire assez simplement en JavaScript (changement de l'attribut src lors du survol).

Whoao ! Tout d'abord merci pour ces interventions. Je vais donc tester vos conseils voir si ça colle. Je vous tiens au courant très vite. Encore merci

Donc voilà ce que j'ai fait et qui marche impec :

côté css :
#button1 {
background: url(images/bouton01.png);
width : 118px;
height : 120px;
cursor: pointer;
position: relative;
left: 45px;
top: 0px;
float: left;
background-repeat: no-repeat;
border: none
}
#button1:hover {
background: url(images/bouton01_over.png);
background-repeat: no-repeat;
border: none
}

côté html :
<div id="button1" onclick="document.location='ofil.htm/'"><a href="ofil.htm/"></a></div>

voilà. Merci encore pour votre aide précieuse...