HR Image Replacement
If a design calls for a graphical horizontal rule, often front end developers will stick in an img tag and call it a day. However, an hr tag would be more semantic - and, most rich text editors for content management systems have a button for the horizontal rule.
These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.
The modern method uses background-image to replace the hr, which is defined normally by border. IE works some wonky stuff with list-item and you may have to scoot things around to get it to work just so, but it works!
-
/* ------- EMBEDDED ------- */
-
<!--[if IE]>
-
<style type="text/css">
-
#primary-content hr {
-
display : list-item;
-
list-style : url(/assets/images/wide-rule.gif) inside;
-
filter : alpha(opacity=0);
-
margin-left: -10px;
-
width : 0;
-
}
-
#secondary-content hr{
-
display : list-item;
-
list-style : url(/assets/images/med-rule.gif) inside;
-
filter : alpha(opacity=0);
-
margin-left: 0px;
-
width : 0;
-
}
-
</style>
-
<![endif]-->
-
/* ----- STYLESHEET ----- */
-
-
hr{
-
background:url(short-rule.gif) repeat-x top left;
-
border: 0;
-
}
-
#secondary-content hr{
-
background:url(med-rule.gif) no-repeat top center;
-
border: 0;
-
}
Where can I get HR image assets?
Josiah notes in his comment that he has provided some free images at Siah Design. Leave a comment if you would like to be included in this list.
Those stinkin' front end developers. Who can trust them?
Very cool. Good to keep in mind. Thx.
I have tried the code and in firefox works great but in IE 7 it does not repeat the image background.
CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm
Great article Neatly Sliced. For some free horizontal ruler replacement images, you can visit:
http://siahdesign.com/?p=210
Wow, Awesome! I've been looking for this solution for weeks and I just wasn't getting it myself. This solution worked wonders for me in all browsers I test (FF, IE6, IE7, Safari, Chrome).
Thanks, that's really helpful - saved me a lot of time and effort. Very handy for CMSs like you say.
always seem to keep comin back here to read, think this calls for a bookmark. thanks much
Thanks for the simple solution. I've been fighting with IE7 all weeek!
You're welcome - I know I was elated when I discovered it as well!
I am wondering generate income might be notified whenever a wall stickers post has been made.
great article, thx
Great help! Thanks!
Yay! Thank you!
della moda insieme alla versione completa del progetto di tipo, riempiendo l . a . semplice elizabeth everyday, every mostrare l . a . postura grazioso.
Way cool! Some extremely valid points! I appreciate you
penning this article and also the rest of the website is extremely good.
Look at my homepage - bed bug treatment products