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.