SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)

    Styling <hr /> for browser compatibilty

    I tried setting margins for the <hr /> tag but it winds up messing with IE even more. Any hacks to get margins and paddings the same across all browsers? Thanks in advance!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrap the HR around a DIV and style that instead.

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    I don't follow.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    <div class="hr"><hr></div>

    and then apply the style to the .hr class instead of to the hr directly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    eg:
    Code:
     <div class="hr"><hr /></div>
    Code:
    .hr {
      height: 15px;
      background: #fff url(images/test.gif) no-repeat scroll center;
    }
    .hr hr {
      display: none;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The reason for the above methods is that hr's can't be reliably styled cross browsers and in fact in IE there is no way to collapse the hr's margins (no matter how hard you try)

    Therefore its best to style a div and hide the hr altogether. The hr is just there for when CSS is turned off but personally I think its overkill (although it is recommended by some accessibility experts).

  7. #7
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    I see. Alright well thank you. It was the margins that were bugging me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •