Die <hr /> doet ambetant in IE

**Joeri P** · 27-06-2007, 13:42

Iemand een idee hoedat ik een background-image als hr kan zetten, via css ?

Ik heb het voorlopig op deze manier gedaan :

hr {border:0px; background:url('/images/box/hr.jpg') no-repeat; color:#281f01; height:1px; margin:25px 0px 25px 0px;}

Maar dan werkt dit enkel in FF, niet in IE6

**Glenn Veugen** · 27-06-2007, 15:16

Goh, waarom zou je dit willen? Is het niet makkelijker om gewoon een afbeelding tussen content te zetten?

**Rex P.** · 27-06-2007, 15:31

Omdat we opmaak en content willen scheiden?

Je kan het zo proberen:

Code:

 
.hr hr            {display: none;}
.hr               {margin: 1px 0px 1px 0px; border-bottom: 1px solid #5A3D1B; height: 10px;}
 
<div class="hr"><hr /></div>

En dan naar smaak een background-image toevoegen aan .hr

**Jeffrey Grin** · 27-06-2007, 15:52

volgens mij moet het op de manier van joeri ook kunnen, hij hoeft alleen maar een display:block; op te geven en een width:100%;
en misschien ook nog een float:left;

**Dirk Bonhomme** · 27-06-2007, 17:25

Ik heb al veel geprobeerd met hr's, maar heb nog geen enkele manier gevonden om ze in alle browsers goed op te maken. Het lijkt echt alsof ze andere regels hebben dan de normale block elementen.

**Joeri P** · 28-06-2007, 06:54

Origineel gepost door Glenn Veugen

Goh, waarom zou je dit willen? Is het niet makkelijker om gewoon een afbeelding tussen content te zetten?

Ik wil zoveel mogelijk de codes gebruiken, waarvoor ze dienen. En op die plaats heb ik echt een horizontale lijn nodig, weliswaar wat mooier gemaakt dan de standaard html hr.

Ik heb het voorlopig opgelost door een foreground color mee te geven, dan toont hij het in IE toch al een ander kleurtje.

**Glenn Veugen** · 29-06-2007, 04:55

ja ik snap wel dat dit om content te scheiden is en ook semantisch juist is, duh. Maar waarom zou je de achtergrondimage dan gebruiken? Ik weet niet of dit gaat lukken. Daarom dat ik al voorstel, om gewoon die bg image als image tussen de content te plaatsen, als het per se een mooie scheiding moet zijn...

**Joeri P** · 29-06-2007, 07:12

http://www.aboutbruges.com/nl/histor...le-kerken.html

bekijk die even met FF. Zo'n background image kan ik niet tonen met IE.

Ja ook al zitten rondzoeken op het net, maar ik vind het ook niet. Het is idd volgens mij niet mogelijk.

**Bart Vandebeek** · 29-06-2007, 08:05

Hoi Joeri,

De hr doet in IE inderdaad tegentrijdig. De manier van Rex is in ieder geval de manier waarop het lukt.

Code:

div.hr {
  height: 15px;
  background: #fff url(uwafbeelding.gif) no-repeat scroll center;
}
 
div.hr hr {
  display: none;
}
 
<div class="hr"><hr /></div>

Je kan bijvoorbeeld hier ook eens kijken.
http://www.sovavsiti.cz/css/hr.html

Mvg,

Bart

Die <hr /> doet ambetant in IE