After setting up various tests, googling, tinkering with bits of html and css, I was able to nail down the cause of this nasty nagging alert – “This page contains secure and nonsecure items” in Internet Explorer (IE).

I was suspecting that any “http://” references anywhere in the html page, referenced javascript and css files may cause the alert to be thrown. For example, I thought the http:// references in the DOCTYPE tag and in the HTML tag might be causing the alerts.



The truth is that those “http://” references in the DOCTYPE and html tags do not matter.

I noticed there are many http:// references in the comment of many included javascript files. And I was thinking maybe they could cause an issue. It has now been confirmed that that does not matter. I changed all http:// instances in all html, javascript and css files to https://, and that does not eliminate the alert.

One post on the internet suggested that linked images that fail to load can cause the nonsecure warning. It turns out that is not entirely true, at least in my case. I deliberately have a CSS file that have background images linking to wrong paths in the same domain, which would cause the images fail to load. And that page loads without any non-secure content warning.

Now, in the end, I tracked it down to the Fancybox JQuery javascript library (jquery.fancybox.js). To be exact, it is its associated CSS file. In the CSS file (jquery.fancybox.css), there are two places where the background-image property is defined:

background-image: url("data:image/gif;base64,AAAA");

By replacing url(“data:image/gif;base64,AAAA”) with url(pixel.gif) where pixel.gif is a one-pixel blank placeholder gif image, I banished the nasty nonsecure content alert. Make sure the image is there and the path to it is correct. The image can be downloaded from (http://www.loremipsum.net/pixelgif/). Does this change break the visual effects of Fancy Box? I don’t know; if you have information on this, please contribute by adding to the comments of this post.

In researching the cause and solution, this link is interesting, but I did not do the patch. Maybe the code I tested with already have the patched included. This article suggested the idea that I tried and it worked.

  • Digg
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Haohao
  • LinkedIn
  • Live
  • MyShare
  • MySpace
  • Reddit
  • Technorati
  • TwitThis

Related posts:

  1. IE Quirks with CSS Sprites
  2. IE Security Warning Caused by Firebug Lite
  3. PNG, transparency, opacity and IE
  4. Internet Explorer (IE) Does not Respond to Link Clicks
  5. onclick not working in IE but works in Firefox

Tags: , , , , , , , ,

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">