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

CSS

Posted by William J. Terrell
William J. Terrell
17,403 Points

Linking to CSS in the head

We seem to have an issue with linking our stylesheet to our html, .asp, and .aspx pages.

We've been using the following to link to the stylesheet:

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

The problem is, when our .asp pages are viewed using the https protocol, the stylesheet won't load.

I tried the following, with two forward slashes, thinking that the link would just inherit the correct protocol:

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

And I've tried providing both options as full URLs to the stylesheet, thinking that the browser could just decide which one it wants to use:

<link href="http://www.williamwoods.edu/css/main.css" rel="stylesheet"/>
<link href="https://www.williamwoods.edu/css/main.css" rel="stylesheet"/>

Providing both options, one with http and the other with https, as links seems to work for the .asp pages, but messes up the HTML pages...

If anyone can help me figure out 1.) how to make this work "across the board", and 2.) why the methods I've tried won't work, I'd really appreciate it. :)

Thanks!

1 Answer

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

The two forward slashes shouldn't be necessary - a relative link should inherit the same protocol as the main page. Can you post a screenshot of the the JavaScript console on page load?

Another thing to try is clearing your cache or incognito mode - I believe sometimes if you click through the warning about a bad certificate it will show you the main page but won't request the resources.

William J. Terrell
William J. Terrell
17,403 Points

Here's a screenshot that shows one page in particular that was causing the problem. I thought maybe there was cascading involved, so I switched the order so that the https version would be on the line above the http, but I still get those errors in the console.

For now, since we're using two include files - one in the CMS for the HTML pages and one on the server as an include for .asp and .aspx pages - I've just set the one for the .asp(x) pages to this convention, and set the one in the CMS for the HTML pages to:

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

That seems to work, but I'd still like to know what's going on and the appropriate way of doing it.

Thanks!

Casey Ydenberg
Casey Ydenberg
15,622 Points

The problem may stem from the fact that you're using two different domains: www.williamwoods.edu as well as the root williamwoods.edu domain.

William J. Terrell
William J. Terrell
17,403 Points

That seems to be the problem. I set it back to just "/css/main.css" and, if I remove the www., it doesn't load the style-sheet.

It looks like our HTML pages automatically redirect to "www.", but I'm not sure how. I guess I would just need to do the same thing for our .asp(x) pages.

We do have a redirect set up so that pages without www. in them get redirected to www.williamwoods.edu, and another that automatically sets it to https, but it doesn't seem to be working on this page.