If you've ever used CSS to style an <HR> for IE you know full well that it's difficult to make it look the way you want it to, and then once it looks the way you want it to in IE it's usually jacked up in FireFox. And of course, vise-a-versa.

I've recently learned that I can style a <div> to look like an <hr> and now you can too!

You can do this either by using a linked stylesheet, internal styles, or inline styles. This snippet below shows the method with either a linked stylesheet or internal styles, but you can easily replace it with inline styles.

In your html code, put


Where you would put


Wherever you put your styles, be them internal or external, add this snippet


If you want an inline style, you can do it as so



You can change the colors to whatever you like, the width, and the height. Just make sure that whatever you set the height to, you also change the margin to match.


You now have an <hr /> look alike that's fully stylable and works in all browsers.

hi,fyrestorm,

Thanks for this an <hr /> look alike tip, it is useful,
but it seem not same with FF and IE7.

btw if someone set IE with large font size, it will large than <hr />

hi,

It work fine wirh opera.

--------------------------
software reviews

This post has been edited by roberts: 19 Apr, 2007 - 05:15 AM

Nice!

Make sure your font size is 10px or less for that too, the height of the div will stretch to the height of the font if the font's height is larger even if there is no text in the div. I think FireFox may limit how small it can be too, but I think the limit is around 6-8px.

This code works perfectly in opera, ie, ff and safari with little customization. Thanks, fyrestorm!

__________
Janet Kellman, software reviews

This post has been edited by Janet Kellman: 9 Jul, 2007 - 08:44 AM

Wow, I never know that <DIV> can be used to style an <HR>, that's great. I've tried the code, it works fine in Maxthon.

Thanks for sharing.


__________
software downloads