Google Chrome, CSS et Images

Bonjour,

J'ai un souci sous Google Chrome, je vois un encadré sur mes images lorsqu'elles sont générées avec du css :

img#test {
background:url(../images/connexion.jpg) left top no-repeat;
top:350px;
height:26px;
left:45px;
width:207px;
position:absolute;
z-index:60;
}


Appel simple : <img id="test">

Alors que dans Firefox j'ai pas ce problème.

Une idée du problème potentiel ?

Par avance, merci.

Bonjour,

gilstandre a écrit :
Une idée du problème potentiel ?

J'ai envie de répondre «ton code c'est juste n'importe quoi» mais il m'apparait que ça pourrait être un peu brutal et pas très accueillant.

Donc à la place je pose la question suivante: mais pourquoi diable utiliser un élément IMG si ce n'est pas pour appeler une image directement depuis cet élément? Si tu veux juste placer un élément de décoration, tu peux utiliser un élément vide sans portée sémantique, notamment un SPAN ou un DIV, avec une image de fond. S'il s'agit d'un bouton cliquable par exemple, il faut considérer l'image comme un texte restitué sous la forme d'une image, avec la structure classique:

<img alt="Connexion" src="connexion.png">

(Si c'est un lien, il y aura un élément A autour. Si c'est un bouton, il y aura un élément BUTTON autour.)

Le mix des deux est a priori une erreur. Chrome (et tout navigateur WebKit je pense) t'affiche un cadre car il repère une image manquante, vu que tu déclares une image sans indiquer de source, et c'est le style par défaut utilisé par WebKit dans ce cas de figure.
Modifié par fvsch (09 Feb 2012 - 16:28)

Effectivement, c'est très moche.

Je pensais pouvoir tout gérer par css, mais pour le coup, les images, ça va pas être le cas

Merci du coup de main