Importing CSS and images into a secure page

There's two types of items that you'll normally import into a secure HTML page: 1. CSS and 2. Images. The behaviour you'll run into, however, is inconsistent across browsers.

1. CSS

When trying to import a stylesheet from an insecure server (http) using either the link tag or @import into a secure page (https) you'll get some odd behaviour. In IE, the lock to indicate that the page is secure disappears. In Firefox, you get a message indicating that the page contains a mix of secure and insecure items and the lock will appear split.

2. Images

When importing images using the img tag from an insecure server (http) into a secure page (https) you'll also run into some interesting stuff. In IE, you'll get a message indicating that the page contains a mix of secure and insecure items and the lock disappears. In Firefox, you'll get no message at all but the lock is still there.

What does it all mean? To keep a consistent browsing experience, keep all your images and CSS on the secure server with your HTML.

Browsers tested:

• Mozilla Firefox 0.9
• Internet Explorer 6