Home/ Questions/Q 8156461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T16:57:34+00:00

I have the following div <body> <span style=border:1px solid red; display:inline-block> Some text<br />

  • 0

I have the following div

<body>
<span style="border:1px solid red; display:inline-block">
    Some text<br />
    <hr />
    some more text
</span>
</body>

In “normal” web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
enter image description here

But in IE7 the hr causes the div to expand to 100% of the body.
enter image description here

Is there any clever css I need to add somewhere so it behaves correctly in IE7?

Please note, I can’t set any fixed width.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The width property of the <hr> tag has been deprecated, so you’re styling options are limited on the <hr> tag.

    A more modern approach is to use the border property of a <div> instead.

    Image rendered by IE 7:

    enter image description here

    Image rendered by Chrome 19:

    enter image description here

    HTML

    <body>
  <div style="border:1px solid red; float:left;">
    <p>
      Some text
    </p>
    <p class="border-top">
      some 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, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:

    • 0