Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthorTetsuo
    • CommentTimeApr 16th 2007
     permalink
    Hello all, first post, so go easy on me ;)

    My question is more specifically with regards to styling <hr>'s for Internet Explorer, which as you may or may not know, is a pain in the arse.
    By default, IE always adds 7px of margin/padding either side of the horizontal rule, but it's possible to remove the top margin value by doing:

    hr {margin-top:-7px;}

    but it's NOT possible to remove the padding at the bottom by using the same styling. Does anyone know of a way to remove these hr padding issues for IE?

    Cheers :)
    • CommentAuthorDandruff
    • CommentTimeApr 16th 2007 edited
     permalink
    There's no real solution to handle IE margin inconsistencies with hrs…
    what I usually do and recommend is enclosing hr in divs, ok it's extra markup, but I think it's worth it:

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

    style the div and hide the hr:

    .line {height:1px;border-bottom:1px solid #000;padding:0;margin:10px 0;}
    hr {display:none;}


    This way you still have hrs in your markup, but you have a precise control of the display.
    • CommentAuthorDandruff
    • CommentTimeApr 16th 2007 edited
     permalink
    oh and if you don't care about keeping hrs in the markup, you can strip them but it's recommended to add html comments for IE6 which doesn't like empty divs:

    <div class="line"><!-- --></div>
    •  
      CommentAuthorTetsuo
    • CommentTimeApr 16th 2007
     permalink
    That's an excellent sollution, Dandruff, particulary the notes about IE6 - thank you :)

    The extra markup isn't too bad really, but I'm still astonished even IE7 does not allow you to properly style a hr. No matter how outdated they are, they're still useful when you want to break up content without needing to create extra containers.
Add your comments
    Username Password
  • Format comments as (Help)