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:

Published July 30, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/184

Conversation

1 Comment · RSS feed
Ali Kenanli said on August 02, 2004

You can create a filesystem link (shortcut, alias, shadow) folder on secure directory to un-secure directory

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.