Discussion :

[blueice]

Salut,

Je vais péter une durite !
Le problème se situe sur IE PC.
J'ai un <hr /> avec un style CSS, j'ai placé une image et j'ai une vilaine bordure que je n'arrive pas à enlever, j'ai essayé border:0; et border:none; seul et ensemble mais rien n'y fait.

Le problème par exemple, sur cette page, il s'agit du petit dégradé bleu avant les commentaires :
http://www.dimension-internet.com/bl...e-image-en-css

Le code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
hr {
	background: white url(hr.jpg) no-repeat center;
	height: 17px;
	border: none;
	margin-top: 40px;
}

A vos claviers !

EDIT : Il semble ne pas exister de solution propre, comme l'indique cet article en anglais ->http://www.sovavsiti.cz/css/hr.html

Mais peut-être qu'avec un coup de baguette magique vous allez me trouver une solution

[Dan_A]

J'utiliserais
.hr { border: 0pt none ; background: white url('hr.jpg') no-repeat scroll center; height: 17px; margin-top: 40px; }
avec
<div class="hr"></div>
Les marges sont à revoir mais c'est crossbrowser compatible.

[blueice]

Décidemment...
Je VEUX un <hr />, je n'utilise pas les <hr /> pour le design mais bien pour faire une séparation structurelle.

Et pour le moment j'ai fait ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class="hr"><hr /></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
div.hr {
    background: url(hr.jpg) no-repeat center;
    height: 17px;
    margin-top: 40px;
}
div.hr hr { border:1px solid white; }

Mais je souhaiterais une solution plus propre avec juste la balise <hr />

[Bisûnûrs]

Hello,

J'avais trouvé le truc à une époque, je ne sais plus comment.

Il s'avère que tu peux mettre la propriété color à un élément hr et la bordure disparait ..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
hr {
   background: white url(hr.jpg) no-repeat center;
   height: 17px;
   border: none;
   margin-top: 40px;
   color: #fff;
}

[Dan_A]

Le problème, c'est qu'ici ça ne marche pas.
Je comprends l'intérêt d'une écriture "sémantique", mais hr signifie horizontal rule, pas séparation structurelle du moins comme je le comprends.
S'il faut une séparation pour les navigateurs texte ou autres, alors
hr { visibility:hidden;}
.hr { border: 0pt none ; background: white url('hr.jpg') no-repeat scroll center; height: 17px; margin-top: 40px; }
avec
<div class="hr"><hr /></div>
devrait convenir.

[kaiser59]

Salut,

j'aimerais bien t'aider mais il est où ton problème ? parce que avec FireFox je voie rien qui cloche par contre avec IE 6 j'ai un trait vertical blanc sur la droite entre ton div#page et ton arrière-plan c'est ça ton problème ?