hr height > 100px; a new IE bug?

Warning This article was written over six months ago, and may contain outdated information.

Is it possible that I’ve found a new IE bug, after all these years? And, worse still, a bug that wasn’t fixed in IE7? I’ve just spent half an hour looking for a solution, and I can’t find a single mention; surely someone has come across this before me?

It involves horizontal rules and the way they are displayed by Intenet Explorer, which seems to set a height limit that other browsers don’t. It’s probably easier if I explain it.

For a site I’m building for a client, the design calls for a wide image sitting below the title on each page. As it’s decorative, I decided to use an hr tag, which would degrade gracefully in the case of having no CSS, with a background image applied to it. There also had to be a 1em gap at both top and bottom, with a border on those side also, which I chose to apply with a div. So my markup looks like this:

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

And my CSS looks like this:

.decoration {
border: 0.5em solid #000;
border-width: 0.5em 0;
}

hr {
background: url('image.jpg') no-repeat #fff;
height: 14em;
margin: 1em 0;
}

All fine and dandy. A 140px-high image with top and bottom borders separated by a white margin, exactly the way I want it. Except… it doesn’t display that way at all in IE6 or IE7. IE6 didn’t display the borders, but that was fixed by giving a hasLayout value:

.decoration { zoom: 1; }

But neither IE6 or IE7 displayed the full image; both limited the height to 100px. After further testing, I found that I was unable to increase the height beyond 100px in any circumstance. After much searching, I believe it might have something to do with IE displaying hr as an inline element instead of a block, but changing the display value doesn’t make any difference at all.

There are a few ways around this; one is to not use the hr at all:

<div class="decoration"></div>

And to position the background image on the div with space above and below:

.decoration {
background: url('image.jpg') no-repeat 0 1em #fff;
border: 0.5em solid #000;
border-width: 0.5em 0;
height: 16em;
}

This actually uses less markup, but doesn’t give me the fallback horizontal rule I wanted. An alternative would be to use the initial style for browsers which support it, then to remove the hr and apply the styles to the div instead in a conditional stylesheet for IE:

hr { display: none; }

But neither of these is the optimal solution. I wonder if anyone reading this has encountered this problem before? And — preferably — if they’ve ever found a solution?

4 comments on
“hr height > 100px; a new IE bug?”

  1. That’s odd indeed; I have not come across that before, but I rarely use the hr element.

    No conditional CSS should be necessary; why not apply the styles to the div element and apply the display: none to the enclosed hr element. Then when CSS is off the hr element will display normally, surrounded by an un-styled div element.

    P.S. I tried to use my ClaimID OpenID to leave this comment; after logging in it came back and gave me a 406 Not Authorized error.

    An appropriate representation of the requested resource /wp-login.php could not be found on this server.

  2. If they already know about this, they probably didn’t fix it because it uses a deprecated element or because it’s rarely used? Either way, I find this very interesting and a good thing to be aware of.

  3. @ gRegor: Good point, I wouldn’t need the conditional comment. I’d prefer not to need the div, but I suppose that’s the best solution.

    @ Devon: I’d love to think they considered it and decided against it, but somehow I doubt that…

  4. Horizontal rule’s are a bit of a headache anyway when it comes to even the most basic styling so I’m not surprised you’ve had problems trying to do this.

    As has already been suggested, I’d probably wrap the hr in a div, hide the hr and then style the div accordingly.

    It’s a similar method to what I use for styling fieldset’s and legend’s consistently.