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.
-
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 :) -
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. -
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> -
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.
1 to 4 of 4