The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Getting css to work, with an external stylesheet
Brian Chandler
post May 11 2021, 10:12 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,309
Joined: 31-August 06
Member No.: 43



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2021, 11:14 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,724
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 11 2021, 11:46 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,800
Joined: 10-August 06
Member No.: 7



Hi Brian!

Seems the external stylesheet uses a "text/html" Content-Type (instead of "text/css") --maybe that confuses the browsers?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2021, 12:40 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,724
Joined: 9-August 06
Member No.: 6



You don't say? biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 12 2021, 01:53 PM
Post #5


Jocular coder
********

Group: Members
Posts: 2,309
Joined: 31-August 06
Member No.: 43



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 12 2021, 02:49 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,724
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st June 2021 - 01:56 AM