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?

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?

• javascript
• jquery
• html
• internet-explorer
• https

• 1 You can use a relative protocol as well: paulirish./2010/the-protocol-relative-url – js1568 Commented Aug 5, 2011 at 19:44
• Interesting. I'll look into that. But I really need relative URLs because this is a static CSS file and doesn't "know" the absolute URL base for the rest of my static content. – Dan Commented Aug 5, 2011 at 19:53
• 1 FYI, the protocol-relative URL won't work around this particular IE8 bug if you're setting background-image through JavaScript. You must use the full URL -- including the scheme and host -- to avoid the IE8 mixed content warning when doing JS style manipulations. (element.style.backgroundImage = "//example./foo.png" will warn.) <sigh> – medmunds Commented Sep 14, 2012 at 21:04

3 Answers 3

Using the fully-qualified URI will avoid the problem of IE8 and below incorrectly creating a bogus URI like about:/relative/file.png that triggers the mixed content warning. This problem was fixed in IE9.

I think the reason you're getting different results is not because the one method is "safer," but because the offending URL isn't present in the base document when IE loads it. I expect you'll get the warning if you were to place that A directly in the document instead of scripting it in after the page has loaded.

If I'm right in my diagnosis, this would mean there's no as-yet-undocumented quirk to the rules about mixed content.

Also: protocol-relative URLs are awesome. Just in general.

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 ment to make HTML5 elements work in IE8 and down.

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

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