0

I'm updating my server to access my web application via HTTPS instead of HTTP. It's working, but some of my CSS styles are rendering differently.

  • The CSS file is loading - most of my styles are there.
  • There are no reports of assets failing to load in the console.
  • All URLs have been updated to HTTPS.

If it's failing because there's an incorrect (HTTP instead of HTTPS) URL in the code, it's not showing up in the browser.

For instance, I'm using Bootstrap and I have a split button dropdown. On the non-HTTPS site it looks right; on the HTTPS site it renders with the button on the right (with the caret symbol) about 1/2 the height it should be. I've dug into the element via the browser and it looks like the height is just not being calculated correctly for the child elements. The margins, padding, and font size are all the same.

I've stepped through the DOM using Chrome's developer console and compared the working version side-by-side with the incorrect version and I cannot find a difference.

I've opened the page in both Chrome and Firefox and find the same issue in both.

I'm probably missing something simple, but I can't figure out what it is. Any suggestions?

Edit

Another clue has surfaced: I came across this answer to a different question and examined the DOCTYPE. It turns out that the HTTP site has a doctype tag at the beginning: ` but the HTTPS site does not (which is weird, since it's in my code). So that's one important difference and I'll do some more work on figuring out where that tag is going. FWIW, I'm using Apache2 to serve the page via a reverse proxy with URL rewriting...

Community
  • 1
  • 1
Kryten
  • 15,230
  • 6
  • 45
  • 68
  • 2
    Possible that the style sheets are pulling in resources over HTTP that are getting blocked, using the `@import` or `@font-face`? Normally the console would report such blocks. – vcsjones Jun 08 '15 at 19:16
  • Yeah, I've checked the console - no reports of anything blocked. – Kryten Jun 08 '15 at 19:23

2 Answers2

0

Try changing any protocols in URLs you have in your CSS resources to either HTTPS or leaving it blank:

http://somedomain.com/style.css => https://somedomain.com/style.css

OR

http://somedomain.com/style.css => //somedomain.com/style.css

This can be in any URLs in your HTML or CSS files.

Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
0

It turns out that the DOCTYPE was the issue. Apparently Apache, when functioning as a reverse proxy with mod_proxy_html, will strip the DOCTYPE from the page by default. I found the basic solution here, then checked out the official documentation for the details.

Kryten
  • 15,230
  • 6
  • 45
  • 68