IE8 Not showing template on Billing/Shipping Page

[jontaco]

Hi all,

Internet Explorer 8 seems to have problems loading the BIlling/Shipping page during the checkout process. It does not load CSS, images, or javascript, but just text.

I have run through IE 6, 7, Safari 4, Firefox 3 and 4 and no problems. I have also checked my CSS links and image links, including the shopcart template.

Thanks,
Jon

[Jim]

IE 8 (and now IE 9) don't like to play by the same rules as other browsers. You probably need to add a meta tag to your template to tell IE browsers to use the version 7 compatibility mode.

Microsoft provides help on how to do this at:
http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

[jontaco]

Ok.

I now have <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> in my header. I am using Paul Irish' HTML5 Boilerplate and this was recommended anyway.

The page still breaks. However, I think I see what may be the real problem.

IE 8 gives me this message:

Security Warning

Do You want to view only the webpage content that was delivered securely?
This webpage contains content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire web
page.

Clicking Yes will deactivate all images and CSS, since they are being delivered non-securely (HTTP). The page is https://mulbe4.sslcert19.com/cgi-bin/sc/billing.cgi?... as you may have guessed, to keep customer's credit card info safe.

I know that users can go into IE8's settings and change the setting for "Mixed Content" to get rid of this annoying popup, but I also know most of my users, who are much older and less savvy, will not.

Are there any fixes I can use as a developer to remedy this? I know that most customers, like myself, will instinctively click Yes, and then wonder what went wrong.

Thanks again,
Jon

[loren_d_c]

On a secure page all of the external objects included on the page (images, .css files, .js files, flash videos, etc) should also be referenced via a secure URL. It looks like you are using a custom shopping cart template called 'shopcart.php', so edit this template and make sure that all of your references to these objects in the [-- DEFINE Shipping --] section (and also the [-- DEFINE Confirmation --] and [-- DEFINE ThankYou --] sections, which are also secure screens) use "https://mulbe4.sslcert19.com" for the domain name instead of your regular "http://mulberrystreetgifts.com" domain.

-Loren

[jontaco]

Thanks Loren.

But will my images and CSS files all need to be located under https://mulbe4.sslcert19.com/?

In other words, do i need to physically copy these files into that location on the server, so that the files can be used for secure and non-secure reasons if need be?

Sorry, I do not know much about certificates or SSL, but I can see all my server requests in Firebug.

Thanks again.
Jon

[loren_d_c]

In your case, it doesn't look like you would need to copy anything. The domain http://mulberrystreetgifts.com and the secure domain https://mulbe4.sslcert19.com already go to the same place. See:

http://mulberrystreetgifts.com/store/css/styles.css

and:

https://mulbe4.sslcert19.com/store/css/styles.css

-Loren

[robm]

You'll just need to make sure all of your images, css, and js calls are made through the correct https:// URL. Currently, you have 24 items on your checkout page that are not called securely.

To see all of these items, go to your checkout page (where you enter your credit card info), copy the full URL in the browser URL section, and paste that full URL at our WhyNoPadlock site (in another tab/window) at:

http://www.WhyNoPadlock.com/

(make sure you keep your browser window on the checkout page until *after* the report is run for your secure page to keep the session open).

That will help you identify any insecure items and change them to secure calls.

Rob