Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Shams Nelson
Shams Nelson
2,888 Points
Posted by Shams Nelson
Shams Nelson
2,888 Points

Http vs Https - Same page looks different!

The page at these urls look different (see screenshot)

http://handwritinguniversity.com/thankyou/index.php <br> <br> https://handwritinguniversity.com/thankyou/index.php

The only difference between them is the one is that one is being viewed through the secure server... What is happening is that the borders are collapsing and the shadow is disappearing...

Any idea why I might be having this issue?

alt text

alt text

2 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

You need to look at using protocol relative URLs.

The reason your page is 'broken' when viewed with https protocol is simply because the browsers are not loading your CSS file 8minutes. When you watch the Network tab load in the Chrome dev tools, it never even loads the CSS file, where as the http version does load the 8minutes file. IE will actually give you a warning that it only loaded content available over the secure network.

Here is a google search. Read up a bit on it to solve your problem. I believe I got you pointed in the right direction, now it's your turn to go read and learn enough about this issue to fix it for yourself. Good luck, let us know how it goes.

https://www.google.com/search?q=protocol+specific+url&oq=protocol+specific+url&aqs=chrome..69i57.6103j0j4&sourceid=chrome&es_sm=93&ie=UTF-8

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

As for the reason for this... browsers have started blocking "mixed content", http assets served over https.

http://arstechnica.com/information-technology/2013/08/firefox-23-lands-with-a-new-logo-and-mixed-content-blocking/

Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

Awesome, thanks, I'm going to start looking into this.

Hmm... so could I just include the pertinent CSS info on that page, so that it doesn't have to draw that info from another page?

Shams Nelson
Shams Nelson
2,888 Points
Shams Nelson
Shams Nelson
2,888 Points

Ah I got it! The solution was really easy once you pointed out that it was trying to draw upon the 8minutes.css file.

It was trying to draw that file from a different url from even a different domain. I just changed the path to instead read it from the folder that it was on in the server (which makes way more sense anyways). So intead of <link href=http://(url)> it's just <link href="8minutes.css">.

It's working great now, thanks for the help!