Modified Horizontal Bar

[siervo]

I am building a new website where I want to use meaningful markup --using each element for what it is, not for layout purposes. I am now trying to make a horizontal bar <hr> display a customized image instead of the typical grayish bar. I tried setting the height to 10px and adding a background image, but this obviously didn't work. So do you have any tips on how I can achieve this? Or will I be stuck using an <img> tag for the horizontal bar?

[bcolflesh]

[sovavsiti.cz...]

[Fotiman]

Since URLs are not generally permitted and the one above will likely be removed, let me sum up...

Essentially, browser inconsistencies make it impossible to give an <hr> a background image in a way that's consistent. Particularly, IE sucks and adds a border around the <hr> that you can't get rid of. The workaround is to wrap your <hr>'s in a <div> and apply the background image to that <div> instead, hiding the <hr>.

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

div.hr { 
 height: 15px; 
 background: #fff url(hr1.gif) no-repeat scroll center; 
} 
div.hr hr { 
 display: none; 
} 

Not perfect, but from what I've read, it's currently the best alternative.

[Marshall]

siervo,

This worked for me, in IE7, Opera 9 & Netscape, , but not Safari, mozilla or FireFox:

hr {
height: 32px; /* same height as image */
background-image: url(background.gif);
}

Marshall

I got it to work in the other three. I had the hr too far down the CSS chain.

[edited by: Marshall at 4:30 pm (utc) on June 28, 2007]

[Fotiman]

But not IE6.

[siervo]

So is there any work-around for IE 6?

[Fotiman]

Only the method that I posted above (wrapping it in a div).

[Xapti]

I was just fiddling around and...
I originally started with
hr::before{content:url(image.gif);padding-left:50%;margin-left:-?px}
and tried having display:none, or visibility:hidden for the HR, but that didn't work.
I then tried changing the HR width (and height)... 3px is the minimum width for firefox (probably cause I didn't remove the border, since it won't get removed on IE anyways).
The image will display overtop of the br and be fine and dandy! If you I haven't yet figured out how to vertically center the image though (for some reason margin-top doesn't work!), but I don't think it's really necessary.

Now everyone knows IE doesn't support the ::before pseudo-class though!
Well, if you want to use it for other things, or if you just want it for this, there's javascript. IE7.js (among others, i'm sure) makes IE6 support the ::before pseudo-class.

I have yet to test it to see how well this method works in IE though (or any other browser for that fact!).

To recap, this is the result I have so far:
hr {height:3px;width:3px;/* border:0 optional*/}
hr::before{content:url(image.gif);
margin-top:-?px;/*doesn't work*/
margin-left:-?px}
?px replaced with half the width/height of image.
Best to include border:0 until there's a way to vertically center the image, otherwise you may see the 3x3 block on top of the image.

[edited by: Xapti at 9:02 pm (utc) on June 29, 2007]

[Xapti]

Update:
Margin-top didn't work because the content wasn't set to display:block, silly me.

I tried testing in IE6 with javascript. It did not work well :(, At least with the JS that I used (ie7.js). The ::before image is put above the HR, and left-aligned, and nothing seems to change it.
It means it could almost be used for left-aligned BRs (if you don't mind, or can remove the 3x3 box), or if you have a fixed width container, you could have transparent space added to the left of the image to align it as you like, but I doubt anyone would really want that.

[lavazza]

The following works on all 'mainstream' browsers:

.myHr {
clear:both;
margin-left:auto;
margin-right:auto;
margin-top:0em;
margin-bottom:0em;
color:#000066;
background:url(myTinyGif.GIF) bottom left repeat-x;
}

For myTinyGif.GIF, an image with:
a height of around 1px or 2px ( bigger would work too... but might look clunky) and a width of around 3 or 4px

I often use a screen dump of three dots or three asterisks with spaces (e.g. . . . OR * * * ) and, on the right site, it can look quite stylee... visible but not obtrusive

Benefit: the browser loads an image that's about 4kB... and recycles it

Declaring it as a .myClassName rather than a #myDivName means you can use it almost anywhere... although the clear:both; can cause a hiccup, esp if/when you're still coding 3 hours after you should have eaten/gone to bed/etc