IE7 & IE8 <hgroup> background color

Question

For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:

<hgroup>
<h6>Request Information Form</h6>
 <a href="#" onClick="closeModal(); return false;"><img src="/images/x-close.png" alt="Close" class="close" /></a>
</hgroup>

I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup> , but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).

The CSS is:

hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}

Also, I have declared <hgroup> as display:block , and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block.).

Thanks in advance for any and all help.

Answer 1

IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).

<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>

Answer 2

being loaded within a modal if that makes any difference

Does your modal window use an iframe ?

If so, you also need to run your HTML5 element shim script inside the iframe .

Answer 3

Use the HTML5 Shiv .

On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.

Using your code above, you should be using <header> instead.