1

When connected over SSL particular styles are getting dropped from the stylesheet. I can't figure any rhyme or reason to it but it's the same styles that are consistently dropped. Perhaps notably, elements that were to be hidden with display:none; are visible. List styles also revert to default browser settings and a couple background images (not all of them) get dropped as well. All URI paths are relative -- both from the page head as well as from the stylesheets themselves.

For example, the following works...

body { background: url(../images/bg-yellowstripes.jpg) repeat 0 0; }

However, the next line does not...

#masthead { background: url(../images/bg-header.jpg) repeat-x 0 100%; }

Anyone have any experience with this that could help the page display properly and avoid the IE mixed content warning? Only affect Internet Explorer btw. Firefox, Safari, Chrome all render the page normally, without any SSL warnings.

iamsar
  • 1,080
  • 2
  • 15
  • 28
  • Please post a link to the website or some source code. – Wex Jun 07 '12 at 22:25
  • 4
    You are probably running into a caching issue somewhere. It has nothing to do with SSL specifically, except that it's a different configuration. – user207421 Jun 07 '12 at 23:52
  • @EJP - that was my guess as well. I haven't tried minifying the styles but other than that I don't know what to do to either force it to cache or force it to refresh and load. – iamsar Jun 08 '12 at 02:32
  • Shift+refresh to clear your cache? You can send HTTP headers to prevent future caching, but not to override an existing cached copy. – Brilliand Jun 16 '12 at 00:26

4 Answers4

2

It sounds like you're loading your CSS files with absolute paths. For example, if you have a site that is going to be served over HTTP and HTTPS, you should use a relative path instead.

Absolute: (Don't do this, IE will give security warnings when viewed over SSL)

<link rel="stylesheet" href="http://mydomain.com/css/style.css" />

Relative:

<link rel="stylesheet" href="/css/style.css" />

If the style is coming from another domain (such as a CDN), use double slashes instead of specifying the protocol. This will cause the path to inherit the protocol the page was requested with when making the CSS request.

<link rel="stylesheet" href="//otherdomain.com/css/style.css" />

Also, use the IE developer tools. They will tell you exactly what network resources are being loaded from the page under which SSL and not.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
0

As well as the relative path structure, if it is IE9 and below there is a memory limit in the client that if the style sheets are to big it will just stop loading them. I can see this happening if you are caching a bunch of files

Aaron
  • 19
  • 2
0

If you are loading fonts from another URL (such as: fonts.googleapis.com) please check the preamble in you CSS. Be sure the path also specifies: "HTTPS" in the path. This simple change solved my CSS over HTTPS problem instantly.

OLD PREAMBLE: @import url('http://fonts.googleapis.com/css?family=Roboto... etc)

CORRECTED PREAMBLE: @import url('https://fonts.googleapis.com/css?family=Roboto... etc)

Always an Artist
  • 37
  • 4
-1

Try adding quotes to your css background paths, like so:

body { background: url('../images/bg-yellowstripes.jpg') repeat 0 0; }

Also, I've read the background property needs a specific order of the values (color url Xpos Ypos repeat). So it would be like this:

body { background: url('../images/bg-yellowstripes.jpg') 0 0 repeat; }

Other than that, my styles were dropped too once, when I was loading them over http:// on a https:// website. But since you're using relative paths, I'm guessing it's something else.

It might be a caching problem.

jlmmns
  • 837
  • 4
  • 14
  • 25