The IE missing border bug

This page isn't fancy or pretty, but it documents the bug and one possible fix.

All of the CSS used to style this page is listed below. I've intentionally kept it pretty sparse to illustrate that the funky Internet Explorer behavior is in fact a bug and not bad CSS on my part.

Setting up some headings

What follows is a couple of <h3> headings with a paragraph of text that follows. Pretty common stuff.

First heading

Here's some text inside a paragraph element.

Second heading

Here's some more text in a paragraph.

Here's the code for it

HTML markup

<h3>First heading</h3>
  <p>Here's some text inside a paragraph element.</p>
<h3>Second heading</h3>
  <p>Here's some more text in a paragraph.</p>

CSS used to style this page

<style type="text/css">
<!--
body {
  position: relative;
  font-family: sans-serif;
  color: black;
  background: white;
}
h1 {
  border: 1px solid #000066;
  color: black;
  background: #bbbbff;
}
h2 {
  color: #000066;
  margin-top: 2em;
}
h3 {
  border-bottom: 1px solid blue;
  margin: 1em 0 0.5em 0;
}
p {
  margin: 0 0 0.5em 0;
  padding: 0;
}
pre {
  padding: 1em 2em;
  background: #efefef;
}
-->
</style>

Now for the bug...

All we'll do here is include the html shown above inside a <div>


<div>
<H3>First heading</H3>
  <p>Here's some text inside a paragraph element.</p>

<H3>Second heading</H3>
  <p>Here's some more text in a paragraph.</p>
</div>

Here's what we get...

First heading

Here's some text inside a paragraph element.

Second heading

Here's some more text in a paragraph.

If you're fortunate enough to not be using Internet Explorer here's a screenshot so you can see the bug in action.

What happened to the border on the first heading?

It appears that the first block element inside a block element looses it's border!

<ugly>The fix that I frequently use is to place something like a <div>&nbsp;</div> before the first heading. I let this "invisible" element loose it's border, which I don't care about anyway.</ugly>

<rant>By the way, I absolutely hate using html markup that doesn't define document structure - but what else can you do? Either cave in, or look like an idiot web designer to the 85% that don't realize they are using an idiot browser.</rant>

See the fix in action...

Now we'll add a <div>&nbsp;</div> before the first heading.


<div>
<div>&nbsp;</div>
<H3>First heading</H3>
  <p>Here's some text inside a paragraph element.</p>

<H3>Second heading</H3>
  <p>Here's some more text in a paragraph.</p>
</div>

We have a border again!

 

First heading

Here's some text inside a paragraph element.

Second heading

Here's some more text in a paragraph.

Once again, here's a screenshot.

What about that ugly space before the first heading?

Yes, I know. We have to fix that.

You can't simply use height: 0 on the div element because, well... you know why.

So use a <p> element instead of a <div>, and set the line-height to zero.


<div>
<p style="line-height: 0">&nbsp;</p>
<H3>First heading</H3>
  <p>Here's some text inside a paragraph element.</p>

<H3>Second heading</H3>
  <p>Here's some more text in a paragraph.</p>
</div>

Watch what happens...

 

First heading

Here's some text inside a paragraph element.

Second heading

Here's some more text in a paragraph.

One final screenshot for all you non-IE users.

What triggers this bug?

In this case it is triggered when you relatively position the body element. I've used relative positioning on block elements quite a lot, so I'm used to this annoyance. I haven't investigated this bug any further than what's explained in this page, so I don't know of any other fixes. I'm sure that I can't be the first person to notice this bug. Maybe someone else can shed some light?