Cross-Browser hr Styling
For regular browsers
hr {
border : 0;
height : 15px;
background : url(hr.gif) 50% 0 no-repeat;
margin : 1em 0;
}For IE < 8 (use conditional stylesheets)
hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}
Here’s a way to get cross-browser hr tags with some progressive-enhancement niceties. Note the use of page-break-after for printing purposes, as well as the line-height and margin to position the :after content (which are section symbols).
you set both the color and background-color since different browsers render hrs differently. The goal here is to make the line look like a line of the color you intended, not necessarily to make it look exactly the same in all browsers.
This and other neat CSS snippets can be found at Hawidu CSS.
Pretty neat, i always have trouble styling them cross browser… i will give this code a try !!
Why bother?
Just make a div, styled as:
width:100% (or some pixel value)
height:1px
background-color:#777777
You could give it a class like .hr or something.
Messing around with HR tags is a waste of time to me, as with any standard that IE fails to adopt.
new styles: http://css-tricks.com/15135-simple-styles-for-horizontal-rules/ ;)
The only issue I seem to have found with this, is that for most browsers I can make a repeat-x hr by changing the 3rd declaration to:
background : url(hr.gif) 50% 0 repeat-x;
However this will not work for IE < 8, instead a workaround could be creating a proper width image, which I have and used hr-ie.gif for older versions of IE via conditional commenting.
Again we run into an issue where if one is using the same divider in the content area as the sidebar, one would have to create (in total) three images, one for most browsers, then two for IE if one were to use one in a sidebar (for instance) and one in content area.
This is going a bit for for IE — this works really well so thanks for sharing. =)
Shouldn’t the background position be 0 50%?
I’m assuming your hr.gif has a certain width and you’re wanting to align it to the vertical middle of the hr?
I prefer to use a PNG image over CSS. It is not a large file to load and it just gets repeated. You can make it look so much better, and create a more clearly sectioned Post. However, I can tell on your website you use CSS to section the White Content to the Grey backgrounds, and that is a simple and clear option.