CSS: Text over Image - IE8 problem

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="ima开发者_JAVA百科ge">

                      <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?

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.