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
CODE
Where you would put
CODE
<hr />
Wherever you put your styles, be them internal or external, add this snippet
CODE
.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
CODE
<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.
Make a styled <DIV> look like an <HR /> that works in all
24 Nov, 2006 - 10:35 AM
| 