You are not logged in.

#1 2013-06-21 13:07:50

skyer
Member
Registered: 2012-06-25
Posts: 56

[SOLVED] external css files don't work with html5 doctype.

I'm not sure what's the gotcha about this. Here is a simple setup. Two files, index.html and 1.css. The css file contains single statement about background color.

<!doctype html>
<html>
<head>
<title>Simple title</title>
<link rel="stylesheet" href="1.css">  
</head>
<body>
simple body
</body>
</html>

Both Chromium (27.0.1453.110 (202711)) and Firefox (21.0) leave the page background unchanged.

If I remove doctype declaration as sole change in code, it works. I was thinking about some kind of changes in including external css files in HTML5, but can't find anything.

Can someone explain this to me?

Last edited by skyer (2013-07-02 17:53:25)

Offline

#2 2013-06-27 15:48:30

techprophet
Member
Registered: 2008-05-13
Posts: 209

Re: [SOLVED] external css files don't work with html5 doctype.

A couple things to check:

  1. Is the CSS being loaded but not applied? In chromium you can check the sources tab of the developer tools to see if it is loading the css file.

  2. Is your CSS properly cased? Judging by your html file and statements, it looks like you're attempting to set the background color of the <body> tag. In your CSS, do you have Body { .. } or body { .. }? (Element IDs are case-sensitive in HTML5, though I'm not sure about tag names because I always use all-lowercase tag names anyway)

You should also close your <link> tag with </link> or with <link [content] />. I'd recommend the former for consistency, since self-closing only works with a few select elements in HTML5

Offline

#3 2013-06-27 16:51:30

skyer
Member
Registered: 2012-06-25
Posts: 56

Re: [SOLVED] external css files don't work with html5 doctype.

1. Clicking on css file link in sources tab results in downloading the file with correct content.
2. I use lowercase all the time too. The content of css file is:

 
body {background-color:green;}

I accidentally removed the closing for link tags when creating the example. Nevertheless, it doesn't work when they are properly closed neither.

I don't really know much about HTML5, haven't gotten through specifications yet, but I can't get to the root of this problem.

Offline

#4 2013-06-28 04:28:40

orschiro
Member
Registered: 2009-06-04
Posts: 2,136
Website

Re: [SOLVED] external css files don't work with html5 doctype.

Is it working if you place the CSS code into the HTML file?

Offline

#5 2013-06-28 13:51:59

fledermann
Member
From: Bielefeld, Germany
Registered: 2013-06-24
Posts: 34

Re: [SOLVED] external css files don't work with html5 doctype.

If the browser does not find a doctype declaration, it will be running in quirks mode for that page.
If your page works in quirks mode, but not normally, then it means there's something in it which is not considered standart-compliant in modern browsers (but maybe it was o.k. to do 6 years ago).
Anyway, self-closing tags are neither necessary nor recommended in html5 - it's just a relict from the dark ages of xhtml.

But honestly I'm not up-to-date what the modern browser consider valid html5 and what not. But my guess is: you need to enclose your sample text in <p> or <div> or something. Otherwise, the text breaks ou tof the body-structure and the body in considered empty.

Fledermann

Last edited by fledermann (2013-06-28 13:52:13)

Offline

#6 2013-06-28 14:04:18

skyer
Member
Registered: 2012-06-25
Posts: 56

Re: [SOLVED] external css files don't work with html5 doctype.

Yes, it works when CSS code in inside html.

This is the updated html file, still doesn't work:

<!doctype html>
<html>
<head>
<title>Simple title</title>
<link rel="stylesheet" href="1.css"></link>
</head>
<body>
<p>
simple body
</p>
</body>
</html>

Yeah, I generally agree - it used to work in less modern browser versions also - but I can't catch the exact problem with my code.

Offline

#7 2013-06-28 14:07:16

fledermann
Member
From: Bielefeld, Germany
Registered: 2013-06-24
Posts: 34

Re: [SOLVED] external css files don't work with html5 doctype.

Perhaps the the "link" tag needs a "type" attribute. As in ´type="text/css"´.

Offline

#8 2013-06-28 14:12:42

orschiro
Member
Registered: 2009-06-04
Posts: 2,136
Website

Re: [SOLVED] external css files don't work with html5 doctype.

skyer wrote:

Yes, it works when CSS code in inside html.

This is the updated html file, still doesn't work:

<!doctype html>
<html>
<head>
<title>Simple title</title>
<link rel="stylesheet" href="1.css"></link>
</head>
<body>
<p>
simple body
</p>
</body>
</html>

Yeah, I generally agree - it used to work in less modern browser versions also - but I can't catch the exact problem with my code.

I just tried that one with Chrome browser and it is working flawlessly. Green background for the body, just as you had defined.

Last edited by orschiro (2013-06-28 14:13:54)

Offline

#9 2013-07-02 17:52:59

skyer
Member
Registered: 2012-06-25
Posts: 56

Re: [SOLVED] external css files don't work with html5 doctype.

Duh. So ran the file once again, even the version I posted the first time and it works. I have no idea why. 1.css had not been changed anyhow.

I'm thinking of file permissions or something.

Nevertheless, problem solved, thanks for your help guys.

Offline

#10 2014-05-09 14:31:17

matt42
Member
Registered: 2013-06-05
Posts: 2

Re: [SOLVED] external css files don't work with html5 doctype.

Same problem. It was becase the webserver served the css file as text/plain, so the browser didn't take it as css code.

To solve the problem, I added this line to the nginx conf :

 include       /etc/nginx/mime.types;

Offline

Board footer

Powered by FluxBB