Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Problems loading style sheets over https

Tags:

html

css

I recently applied an SSL certificate to my domain, but I'm having problems with some of the styles when viewing my website on HTTP:// the styles are fine. But, when viewing it through HTTPS:// no styles are applied at all.

I found out what the problem was. I wasn't loading my third party styles through HTTPS. I switched to HTTPS, and all problems were solved.

like image 855
MrJoshFisher Avatar asked Mar 16 '13 17:03

MrJoshFisher


People also ask

Why is CSS file not loading?

A site may not load the CSS file due to browser caching. It's the most common cause and is the easiest to fix because you only need to remove the cache from your browser. Yet, there are times when an invalid line of code or conflict with other themes and plugins can also make the CSS file unreadable.

What are the 3 ways to insert style sheets to the HTML code?

There are three ways of inserting a style sheet: External CSS. Internal CSS. Inline CSS.

How do I link a style sheet to a Web page?

To add an external stylesheet to a web page, use the <link> tag, providing the URL of the style sheet in the href attribute, as well as rel="stylesheet" . For the following example, I've taken the styles from the above (embedded) example, moved them to an external style sheet, then linked to that file.

How do I import style sheets?

The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.


1 Answers

You're probably using an http:// link to a stylesheet on an https:// website.

Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).

The reason for this blocking is that insecure HTTP resources like stylesheets and scripts could still be modified by an attacker and used to spoof/hijack secure parts of the site.

If the stylesheet is served from your server, then omit protocol+host part of the URL, i.e. instead of http://example.com/style.css use /style.css as the URL, so it'll work on both HTTP and HTTPS. You can also use protocol-relative URLs.

If you have to have one full URL, then use https://… URLs only.

like image 60
Kornel Avatar answered Oct 26 '22 14:10

Kornel