Help - Search - Members - Calendar
Full Version: Getting css to work
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Brian Chandler
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!
pandy
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/validat...ng=&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/validat...ng=&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...alidate-by-uri
Christian J
Hi Brian!

Seems the external stylesheet uses a "text/html" Content-Type (instead of "text/css") --maybe that confuses the browsers?
pandy
You don't say? biggrin.gif
Brian Chandler
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-va...May/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...
pandy
It isn't hard. There are lots of pages that show you the headers. My favourite is Rex Swein's, 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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.