What exactly are the rules for avoiding the "mixed content" warning in IE due to background images?

user_207364 0
Viewed 7874

This is related to SSL and mixed content due to CSS background images but that question had no accepted answer and the one I'm asking is a little more specific.

Under some circumstances when accessing an HTTPS website, IE will throw the "mixed content" warning if an element is given a style with a background image. I found one forum reference that said the warning can be avoided if you put the reference in a stylesheet, for example

#someElement a {
    width:11px;
    height:11px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites_list.png) no-repeat;
    cursor:hand;
    cursor:pointer;
    background-position:0px -72px;
}

but not if you try to create the element inline, a la

$('#someElement').append("<a title='something' style='background: url(../images/sprites_list.png) no-repeat; ... // etc

and indeed, this works for me. I've seen others that say you have to use an absolute https URL to refer to the image, rather than a relative one.

What is the real story here? Is there some "official" explanation or at least a reference to what the rules are? Or failing that, is there a standard set of guidelines which if followed makes it extremely unlikely to trigger the warning?

internet-explorer https html jquery javascript
3 Answers

After countless hours of the same problem, I couldn't figure out the problem. I then began picking through my source code and I found it. I'm using HTML5, and I'm using a shiv inside of a conditional comment to make HTML5 elements work in IE8 and down.

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

My issue was that IE8 and down was throwing an error. That issue was solved by changing the above into a https, with the following:

<!--[if lte IE 8]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

I haven't tested it, but I imagine the following might work too.

<!--[if lte IE 8]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

It might save somebody down the road. If not, then good luck!

user_15331640
Related