try another color:
try another fontsize: 60% 70% 80% 90%
Wolfe Web Services

Fancybox SSL Security Warning in IE6 and IE7

Although this is probably a rare and fairly random issue, I thought I'd write a blog to address it because it was so darn hard to track down. While building a webapp for my company, once we turned SSL on we faced some common gotchas (and some not so common) that most SSL websites face. One such issue was trying to suppress the warning that Internet Explorer gives about accessing secure and insecure data from the same page. Typically this happens if you have a page secured by SSL (meaning the URL starts with https), and you are accessing resources with paths that include the protocol http: rather than https:. If you make your local resource paths relative rather than absolute, you won't have a problem (for the most part). Most issues arise from an image/css/javascript which is referenced as However, in my case I had no such references yet I was still getting this warning message. I went through all of my code, grepping for http: but found nothing (besides some comments). I then fired up wireshark and monitored all http traffic, and sure enough, there was absolutely NONE occuring when loading the site I was building. Thus, the message was obviously another IE bug (one of billions the software giant has its its infamous software). So I did what any other respectable developer does, and tried google. Eventually I came across a person claiming that the lightbox implementation they were using had a weird line of CSS which caused the issue. Since I was using Fancybox (a really cool jQuery lightbox implementation), I thought perhaps I have something similar going on. It turns out I had the exact same line of CSS which was causing the warning. Offending CSS:

 a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url(data:image/gif;base64,AAAA); outline: none; } 

Particularly, this line:

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

It looks like this css creates an image with a base64 encoding of AAAA which turns out to be just a transparent image. If you remove this line of CSS you won't get the security warning anymore, however your Fancybox's navigation buttons won't work correctly. The correct fix is to replace the offending line of css with the following

 background-image: url(/path/to/blank.gif); 

Basically, just create a 1px x 1px blank.gif file (transparent, not white), and put it in an image folder on your website. Then put the correct path to that image in the css as described above, and tada, no more warning messages (assuming you don't have other problems). Fancybox should work exactly the same as before as well. == Update 2009-10-20 == Thanks to Tom below I found another issue that only happens with IE6. When the Iframe is created it causes the SSL warning message to occur in IE6 because the iframe has no src attribute. By changing the offending line of code to include a src="javascript:false;" will remove this error. Thus change this:

 $("#fancy_inner").prepend('<iframe class="fancy_bigIframe" frameborder="0" scrolling="no"></iframe>'); 


 $("#fancy_inner").prepend('<iframe class="fancy_bigIframe" frameborder="0" scrolling="no" src="javascript:false;"></iframe>'); 

== Update 2009-11-1 == I've found that several other projects around the net have the same problem and I've patched those as well (using the <iframe src="javascript:false;"></iframe> method). The most recent one being the jquery autocomplete plugin (rcarver fork)