Page 1 of 1

Make a styled <DIV> look like an <HR /> that works in all Rate Topic: -----

#1 fyrestorm  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 10
  • View blog
  • Posts: 3,113
  • Joined: 04-April 02

Posted 24 November 2006 - 10:35 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Make a styled <DIV> look like an <HR /> that works in all

#2 roberts  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-March 07

Posted 11 March 2007 - 12:11 AM

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 />
Was This Post Helpful? 0
  • +
  • -

#3 roberts  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-March 07

Posted 19 April 2007 - 05:15 AM

hi,

It work fine wirh opera.

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

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

Was This Post Helpful? 0
  • +
  • -

#4 beef  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 141
  • Joined: 02-November 06

Posted 19 April 2007 - 12:39 PM

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.
Was This Post Helpful? 0
  • +
  • -

#5 Janet Kellman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-July 07

Posted 09 July 2007 - 08:43 AM

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

Was This Post Helpful? 0
  • +
  • -

#6 angela08  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 03-July 08

Posted 03 July 2008 - 06:50 PM

:D 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
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1