Image on a background of horizontal rule (HR) without wrapper element in IE
This is a translation of my previous article Obrázek na pozadí horizontální čáry (HR) bez obalového prvku v IE (czech). Vilém Málek convinced me that the best thing I can do is to translate and publish it – so the whole community can profit from it. So don't complain about my horrid English. If you laugh now, stop reading. I really mean it! :o) OK, let's advance to the article.
I'm kind of mythbuster and CSS is my playground. Yesterday while reading some long forgotten bookmarks I noticed that Marek Prokop as well as Petr Václavek didn't succeed when trying to get rid of the annoying border which is surrounding HR element in IE and which prevents this element to be used as a canvas for some kind of fancier separator. I know the solution.
I wanna fancy line and I want it in semantic and practical way
Here is the thing: you have some paragraphs which you wanna have separated using some kind of fancy line or ornament. But you like semantics as well as the users of text browsers, so you want those paragraphs to be separated using <hr> element in the source code. What are the options?
- Try styling <hr> element to have needed height and to display desired ornament on its background. Of course, this is the most semantic and practical solution.
- Display the ornament using background property on the bottom of the paragraph which will be set larger padding-bottom. Then hide the horizontal rule – <hr> – using display: none.
- Inasmuch as you fail realizing option nr. 1, you use <div> element to wrap <hr> and set a background to this wrapper. You hide the horizontal rule using display: none after that.
What's the attitude of typical web-coders?
- A beginner or a coder, who ignores semantics, uses <div> element anyway and doesn't care about <hr>.
- An advanced coder, who already created a page or two, will most probably follow the second option.
- A coder gadgeteer, who takes his work not as a craftsmanship but as an art, will most probably suffer trying to realize option one.
- An old hand coder, so called pro' or layout-machine, will most probably prefer the first option from the very beginning because he knows, that there few Explorer issues which made him turn grey in the past.
Where is the problem?
You might wonder whats co complicated using the option number one. In that case look at the example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Image on a background of horizontal rule</title>
<style type="text/css">
hr {
border: none;
background: url('image.gif') center center no-repeat;
height: 15px;
}
</style>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>If you have opened the page in one of the modern browsers, e.g. Firefox, Opera or Safari, you can see the intended result. The paragraphs are separated by three „quarterfoils“, which I borrowed from Marek Prokop. But – if you used Internet Explorer, and it doesn't care which version (yes, including IE7!), you can see some kind of border around the <hr> element even thought I've set border: none in the stylesheet for it.
At this moment are both Marek Prokop and Petr Václavek concordantly shoulder-shrugging. They say the solution doesn't exist.
And hell it does…
… though a wee bit scabrous. But somebody who loves clean and easily usable markup and who leaves all the „dirty work“ to CSS can't complain about it. You try for a while and you find out that setting the color property to match the color of the background destroys the border. Unfortunately – the image on the backgroud as well, this is the wrong way. But – you've learned that what seemed to be border before is actually content (!) of the <hr> element. You're smart, so you have a shot at a negative text-indent trying to scrape the content out of the screen. Voilá, it worked! But „mysteriously“ (explanation is a bit complicated) the content disappeared along with the background image as well. Another wrong way, you're starting to fell like Alice and being pissed you live in the wonderland you delete the whole source code.That's how I imagine the previous attempts to solve the problem ended. Maybe someone took a look round the Internet and found that there are some unpractical solutions using the clip property (the rule must be absolutely positioned) or filters (the content is reduced to 1×1 px so you can't apply border, background color or texture on the background for the rule). Maybe he used such solution and achieved some kind of Pyrrhic victory, which lacked of elegance and practicalness. So what did I find out?
Using of proprietary zoom property
Maybe you know that Explorer 5.5 has been gifted by brand new zoom property which allows coder to decrease and increase elements on the page. If I tell you that the content border of <hr> has a width of only one pixel and that Internet Explorer is not that bad in rounding, maybe you'll figure it out by yourselves.
All you need is to reduce the line to less than 50% of its width using the zoom property (in fact, the first safe value is 40%) and the width of the border will be rounded down to zero! I'm not going to make it linger – it works. Plus <hr> has one very convenient ability – it keeps its set width whatsoever the zoom is!
What do I need to do to make it work?
- Take the original background image, scale it up to create new one that will be four times larger that the original (I strongly recommend working with zoom: 25%) and save it using filename different from original.
- Add a conditional comment into the document using which you add new stylesheet that will be visible only to Internet Explorers. Of course the zoom property is not valid, don't put it in your main stylesheet if it's not necessary.
- Use the new stylesheet to declare new definitions for horizontal rule. You must change the background-image to point to the new bigger image, then multiply the height property by four as well as border-width, if you are using any.
The solution could look like this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Image on a background of horizontal rule</title>
<style type="text/css">
hr {
border: none;
background: url('image.gif') center center no-repeat;
height: 15px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
hr {
background-image: url('four-times-larger-image.gif');
height: 60px;
zoom: 25%;
}
</style>
<![endif]-->
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>
<hr>
<p>Lorem ipsum...</p>The second link points to a solution showing that coder is able to further style the horizontal rule which is quite useful in many cases.
To sum up…
This is not perfect way to do it, but personally I think it's the first practical way. The one extra image is worth the effect. I don't know about anybody figuring out the solution before me, but if you do or if you know a better way how to achieve such effect, please use the comments to let me know. Maybe I'll show you how to get rid of unwanted „margin“ round the <hr> element next time, thus how to clear safely without the annoying gap in IE.
Comments are welcome!