Solving IE problem the HTML way - "This page contains both secure and nonsecure items. Do you want to display the nonsecure items?"

For some reason, IE may complain about mixed content while visiting the website via TLS/SSL. From the user point of view, the only way to resolve this would be changing setting in IE browser.

However, the developer may do a little bit more to tackle this and eliminate possible cause to trigger this kind of error message on IE.

As what many forum users suggested, the first thing to look in the source code would be src attribute of image files which sometimes points to non-HTTPS URL and lead to error.

For what I have been experiencing is somehow a bit different than this common syntax error, IE reports mixed content error when I insert something simple like this:

...
< div style="display:none" >
< input id="but" name="but" onclick="..." type="button" value="Press Here" /> 
< div />
...

To hide particular <div /> container, there is no other simpler way than the one above. As you can see there is an input button within invisible <div /> container. This tiny input button DOES create trouble as IE actually complains mixed content error from here.

So, let's have a change to the code and make IE silent with this:

...
< div style="display:none" >
<span class="CSS_button_style" id="but" name="but" onclick="..." > Press Here </span>
< div />
...

We basically swap <input /> element with <span /> element and try the best to make it look like the original button by using CSS. User should not notice any difference if we apply CSS style which mimics the style of button <input /> element.