css - hr makes the parent div resize to 100% in IE7 -
i have following div
<body> <span style="border:1px solid red; display:inline-block"> text<br /> <hr /> more text </span> </body> in "normal" web browsers, width of div calculated fit text. , hr 100% of div. 
but in ie7 hr causes div expand 100% of body. 
is there clever css need add somewhere behaves correctly in ie7?
please note, can't set fixed width.
the width property of <hr> tag has been deprecated, you're styling options limited on <hr> tag.
a more modern approach use border property of <div> instead.
image rendered ie 7:

image rendered chrome 19:

html
<body> <div style="border:1px solid red; float:left;"> <p> text </p> <p class="border-top"> more text </p> </div> </body> css
.border-top{ border-top:#000 1px solid; padding-top:1em; } note: ie 6 & 7 don't support display:inline-block, might need use float:left instead. article below compares use of aforementioned properties:
Comments
Post a Comment