Question

I’m a total noob to CSS.

I have a css file both locally and remotely. I load a local html file (that is, c:\temp\index.html) in the address bar. I use firefox.

The file sets the height of ‘html’, ‘body’ and 2 divs to 100% (height: 100%)

When I link to the local css file, everything works ok. When I link to the remote file, it looks like the height style (at least) doesn’t work. I see this when trying to get the offsetHeight property of the body element in javascript.

What can be the reason for this?

I link to the remote site using:
<link rel="stylesheet" media="screen, projection" href="https://raw.github.com/SirPepe/Pik5/master/assets/css/pik5.css">

(the doctype of the local file is html)

To test: clone https://github.com/SirPepe/Pik5, load the local index.html file. then change it so <link rel="stylesheet" media="screen, projection" href="assets/css/pik5.css"> becomes <link rel="stylesheet" media="screen, projection" href="https://raw.github.com/SirPepe/Pik5/master/assets/css/pik5.css">. Reload to see the slides are no longer properly setup

NOTE: using firebug I see the css file loads

Answer 1

So, after doing some digging, it looks as though your CSS file is being linked to, but none of your styles are actually applied. That led me to believe that there was something else going on. I ran your html through a validator and found nothing specific, but when running your github css through a validator, I got this response:

I/O Error: Unknown mime type : text/plain

It looks like github sends a Content-Type HTTP header that says text/plain instead of text/css for your style sheet file. You may be able to simply define type="text/css in your html document for that stylesheet link, but otherwise I’m unsure of how you can solve this issue since you don’t have access to their mime-type settings.

See a similar issue here: Add mime type to HTML link