Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Getting css to work

Posted by: Brian Chandler May 11 2021, 10:12 AM

Hello!

I am at last moving my website (the puzzle shop) to a new domain, and trying to tidy up lots of bits of unpleasantness in the process. As always, things go slowly, until I get to css, then they stop. I have spent the last few hours reducing the mystery of a non-working stylesheet down to a minimal example - here: https://imaginatorium.com/test.html The source is as follows, and the text under the h1 header is the same as in the style sheet.

QUOTE

<!DOCTYPE html>

<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="test.css" type="text/css">

<style>
@import url("test.css");
</style>

<title>Detective Conan (Case Closed) - anime jigsaw puzzles from Japan</title>
</head>

<body>

<h1>Hello!</h1>

<pre>
H1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.5em;
text-align: center;
color: #0040b0;
margin: 0.2em auto 0.5em;
padding: 0;
}
</pre>

</body>

I attach the stylesheet twice, using both link and import; nothing works, but it I paste the h1 definition into the style tag it does work. In the old website both methods for external stylesheets work; I have tried two browsers, and at least chrome specifically shows the content of the stylesheet file, but does not apply it to h1. Help!

Posted by: pandy May 11 2021, 11:14 AM

Hi Brian! Long time...

I can't but confirm what you say. Your CSS works if copied to a style block in HEAD.

The validator is confusing this time. If I feed it the URL to the style sheet it says no errors.
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fimaginatorium.com%2Ftest.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

If I give it the URL to the HTML page it says "File not found: https://imaginatorium.com/test.css: You can't import an HTML document ".
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fimaginatorium.com%2Ftest.html&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en
I guess it only checks content-type if @import is used...

But that's it anyway, the CSS is served as text/html.
https://validator.w3.org/i18n-checker/check?uri=https%3A%2F%2Fimaginatorium.com%2Ftest.css#validate-by-uri+

Posted by: Christian J May 11 2021, 11:46 AM

Hi Brian!

Seems the external stylesheet uses a "text/html" Content-Type (instead of "text/css") --maybe that confuses the browsers?

Posted by: pandy May 11 2021, 12:40 PM

You don't say?

Posted by: Brian Chandler May 12 2021, 01:53 PM

Crumbs, thank you both (I assume Christian found this independently). It does seem pretty weird: a validator is supposed to whinge about all sorts of things that browsers happily accept - not the other way round. I posted on the validator mailing list (here: https://lists.w3.org/Archives/Public/www-validator-css/2021May/thread.html ) but it doesn't look likely I will get much response.

I decided at one stage to use php in all css files, so I can declare appropriate constants, so I have this in .htaccess:

AddType application/x-httpd-php7 .php .html .css
Action application/x-httpd-php7 /cgi-bin/php7.cgi

(But I changed my mind: CSS has finally managed to catch up with where I was 15 years ago, but of course the word they chose is "var", which is wrong, because it is not a variable. Hmm.)
Anyway, the real css file is in a subdirectory, but to leave this so the example problem "works" (i.e. fails) I have to leave it going through PHP; eventually I managed to find an appropriate header() to send.

Why is it so hard to see the actual response (i.e. including the headers) which the server is sending...

Posted by: pandy May 12 2021, 02:49 PM

It isn't hard. There are lots of pages that show you the headers. My favourite is http://www.rexswain.com/httpview.html, has been around forever. But it doesn't accept GET anymore, that's why I used the W3C's Internationalization Checker instead, so I could link to the result for your document. And there are standalone programs as well as browser addons. Nowadays at least FF and Chrome based browsers have it built in, in the Inspector.