Image de fond en balise <HR>

Bonjour,

Je tente une expérience, pour l'instant pas fructifiante. Peut-être que je m'y prends mal : je souhaite mettre une image de fond centrée sur une ligne de séparation, en utilisant donc la balise HR.

hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #F00;
background: #f00 url(../img/kay-hr.gif) center no-repeat;
border: 0;
}

Bien sûr l'image est au format 18x18 et je cherche à la placer sur le filet horizontal. Mais je crois que je me trompe, isn't it ?

si ton <hr> a 1px comme hauteur, c'est normal que ton image ne soit pas visible si elle en fait 18px.

ps: n'oublie pas les balises [ code ] [ /code ] quand tu postes du code...

Vi vi vi Merci j'avais repéré cette coquille.
Ceci dit j'avance :

hr {
height: 18px;
margin: -0.5em 0;
padding: 0;
color: transparent;
background: transparent url(../img/kay-hr.gif) center no-repeat;
border: 0;
}

cela fonctionne. mais une fois de plus c'est IE qui réagit bizarrement : il place une sorte de "box" ombrée autour...

Je crois que je commence à en faire le tour de cette balise : une solution avec span voir div serait p e plus facile... Sauf suggestion de votre part. Voilà.

Bonjour Digitzu et bienvenue,

Merci d'éditer ton post pour présenter lisiblement ton code comme demander dans les règles.

ps: notes la visite préalable de la faq est un bon réflexe : Styler la balise <hr /> sous Internet Explorer qui t'aiguillera vers la plus compatible des façons de styler hr.

Merci Igor !

Je l'avais justement lue et je voulais aller plus loin !

Bonjour Digitzu,

Le problème de la bordure sous IE Windows est justement celui sur lequel cette idée butte pour l'instant : aucune solution n'a encore été trouvée.

On parvient tout au plus à améliorer son rendu en donnant au hr la largeur de l'image.

Mais peut-être auras-tu plus de chance ou d'inspiration...

Pas mieux !