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. enter image description here

but in ie7 hr causes div expand 100% of body. enter image description here

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:

enter image description here

image rendered chrome 19:

enter image description here

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

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -