CSS2 Problème de bord d'image sous Firefox

L33T · 20 Novembre 2004

Salut,

Voulant utiliser un bandeau de pub pour Firefox, le site officiel me donne ce code html :

Bloc de code:

<a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=70"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://www.spreadfirefox.com/community/images/affiliates/Buttons/88x31/get.gif"/></a>

Problème : l'attribut "border" n'est pas accepté dans le xhtml strict.
Or, si on le supprime l'image devient entourée d'un cadre bleu sous Firefox après que le lien vers lequel elle pointe ait été visité.

Je cherche donc un moyen de remplacer " border="0" " par un attribut CSS (tous les essais que j'ai pu faire se sont avérés inutiles : la cadre bleu est toujours là) quelqu'un a une idée ?

(oui je sais : de l'art de se prendre la tête sur des trucs stupides

)

iMatthieu · 20 Novembre 2004

Salut,

Tu peux ajouter dans ton css cette ligne :

a img {
border: 0px;
}

PS : xhtml transitionnal sinon

L33T · 20 Novembre 2004

Merci !

Je venais de trouver la réponse sur ce site (allemand).

Ce qui est étrange c'est qu'on ne puisse pas régler ça au niveau du style de l'image elle-même et qu'on soit obliger de toucher au style même de img.

Mais ça marche !

canari · 20 Novembre 2004

Salut,
c'est volontaire, avec l'XHTML, il faut séparer le contenu de la présentation.
donc, comme le bord de l'image concerne la présentation, c'est à gérer via les propriétés CSS.
@+

L33T · 20 Novembre 2004

> Canari

Je me suis mal exprimé ! je reprend :

Ce qui est étrange c'est qu'on ne puisse pas régler ça au niveau d'un style CSS spécialement appliqué à l'image en question et qu'on soit obliger de toucher au style CSS de l'élément général img (ce qui veut dire qu'en l'occurence la bordure définie s'appliquera à toutes les images de la page).

C'est pour ça que je ne m'en sortais pas !

C'est plus clair ?

canari · 20 Novembre 2004

effectivement, on s'était mal compris.
bon, ce n'est pas bien grave

mais si tu veux le préciser pour 1 seule image (et non pas toutes), tu peux le faire, il faut utiliser la propriété "style".
exemple:
<img src="dico.jpg" alt="capture du module dico" style="border : 10px solid red;">

L33T · 20 Novembre 2004

Oui ça ça marche, mais du coup on ne sépare plus le contenu de la présentation !

canari · 20 Novembre 2004

L33T a dit:
Oui ça ça marche, mais du coup on ne sépare plus le contenu de la présentation !

que répondre

ça permet juste de traiter des exceptions

tu peux voir ça comme une possibilité supplémentaire d'écriture des caractèristiques css (donc de style).
il est bien possible de décrire les caratèristiques css dans le fichier html ou dans un fichier externe.
tu peux donc penser que les mettre directement dans le fichier html (même si c'est dans la partie <head>) n'est plus distinguer le contenu de la présentation (et là, je penserais comme toi).

personnellement, je préfère tout mettre dans un fichier à part, et puis, à partir de 2 fichiers html, c'est un peu (voire beaucoup) idiot de s'en passer.

en tout cas, tu as maintenant 2 possibilités, tu choisis celle qui te plait le plus :zen:

Nephou · 22 Novembre 2004

Comme tu l'as compris, le bord bleu vient du fait que l'élément img descende d'un élément a et qu'il existe chez les navigateurs un style par défaut pour cette catégorie de descendance.

Dans la feuille de style sus citée le sélecteur c'est "a img" et non "img", ce qui limite un peu les choses et tempère ton :
"Ce qui est étrange c'est qu'on ne puisse pas régler ça au niveau du style de l'image elle-même et qu'on soit obliger de toucher au style même de img"

Ensuite, rien ne t'empèche de créer une classe noborder et de l'appliquer au cas par cas

<img class="noborder" alt="alternative textuelle" title="titre" href="cestparla.html" />

CSS2 Problème de bord d'image sous Firefox

L33T

Membre enregistré

iMatthieu

Membre actif

L33T

Membre enregistré

canari

Membre confirmé

L33T

Membre enregistré

canari

Membre confirmé

L33T

Membre enregistré

canari

Membre confirmé

Nephou

de pas sage

Sujets similaires