CSS: Text over Image - IE8 problem - css

Question

I have images that have statistics texts printed over them. This worked well with FF, Chrome and IE9 but not on IE8. I cant just seem to figure out what is the problem here.
HTML:
<div>
<div class="image">
<img src="#Url.Content("~/stuff/stuffImage.png")" alt="" />
<GIR1><span>#ViewBag.stuffArray[4]%</span></GIR1>
</div>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
GIR1 {
position: absolute;
top: 110px;
left: 50px;
width: 100%;
}
GIR1 span{
color: white;
font: bold 15px/15px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
Instead of positioning the text inside the picture. It positions them outside it like normal text. What could cause the problem here?

Answer 1

I'm reasonably sure it's down to your usage of the custom element <GIR1>.
IE below version 9 does not natively recognize unknown elements.
You can either switch to <div class="GIR1"> (which would be the easy choice here), or:
You have to use a JavaScript fix: http://code.google.com/p/html5shiv/
Note that you'll have to add the custom element to the script yourself.
For the uncompressed version, see: http://www.iecss.com/print-protector/
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'
You need to add your custom elements to that list.