[fyrestorm]

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

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

Where you would put

<hr />

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

.hr {
background-color: #FFFFFF;
border: 1px solid #000000;
height: 10px;
margin: 10px 0;
width: 760px;
}

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

<div style="background-color: #FFFFFF; border: 1px solid #000000; height: 10px; margin: 10px 0; width: 760px;"> </div>

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.

[roberts]

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 />

[roberts]

hi,

It work fine wirh opera.

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

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

[beef]

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.

[Janet Kellman]

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: 09 July 2007 - 08:44 AM

[angela08]

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