[OT] first stanza in css not understood
Hi Sorry if this is off-topic, but I have been scratching my head for hours and have been frustrated with this error. I am writing this code just for myself. The first stanza in my css code which I moved from HTML to an external css file does not appear to be read at all. This appears to happen whatever the first stanza is, and I have tried moving them around. All other CSS tags are understood, but only if they do not appear in the first stanza. I can give the first two stanzas including the lines above it (all comments). Doesn't look like there is anything wrong here to me, although there is a bit of repetition. Paul ------------------CSS CODE BELOW----------------------------- // Cascading stylesheet for form elements such as buttons // "equal" and "clear" are two class names I gave for form buttons .equal { background-color: #4CAF50; /* Green */ border: 2px solid black; color: white; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .equal:hover { background-color: #aefe41; color: black; } .clear { background-color: #FF0000; /* Red */ border: 2px solid black; color: yellow; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .clear:hover { background-color: #FFABAB; color: black; }
Paul, I am trying out your CSS code here. It works for me when I delete your // comments. I did not realize this was part of the CSS langugage. On Sat, 02 Apr 2016 22:37:29 -0400 "Paul King" <sciguy@vex.net> wrote:
Hi
Sorry if this is off-topic, but I have been scratching my head for hours and have been frustrated with this error. I am writing this code just for myself.
The first stanza in my css code which I moved from HTML to an external css file does not appear to be read at all. This appears to happen whatever the first stanza is, and I have tried moving them around. All other CSS tags are understood, but only if they do not appear in the first stanza. I can give the first two stanzas including the lines above it (all comments). Doesn't look like there is anything wrong here to me, although there is a bit of repetition.
Paul
------------------CSS CODE BELOW-----------------------------
// Cascading stylesheet for form elements such as buttons // "equal" and "clear" are two class names I gave for form buttons
.equal { background-color: #4CAF50; /* Green */ border: 2px solid black; color: white; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .equal:hover { background-color: #aefe41; color: black; } .clear { background-color: #FF0000; /* Red */ border: 2px solid black; color: yellow; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .clear:hover { background-color: #FFABAB; color: black; } --- Talk Mailing List talk@gtalug.org https://gtalug.org/mailman/listinfo/talk
-- Howard Gibson hgibson@eol.ca howard.gibson@teledyneoptech.com jhowardgibson@gmail.com http://home.eol.ca/~hgibson
Paul King wrote:
The first stanza in my css code which I moved from HTML to an external css file does not appear to be read at all. This appears to happen whatever the first stanza is, and I have tried moving them around.
`//` isn't the right syntax of a CSS comment, warping your element in `/* */` will fix your issue. See this Gist for how it would normal look: <https://gist.github.com/myles/8cf6bbe1519d4fd4c1609f5b7d064eda>.
On Sat, 2 Apr 2016, Paul King wrote:
Hi
Sorry if this is off-topic, but I have been scratching my head for hours and have been frustrated with this error. I am writing this code just for myself.
The first stanza in my css code which I moved from HTML to an external css file does not appear to be read at all. This appears to happen whatever the first stanza is, and I have tried moving them around. All other CSS tags are understood, but only if they do not appear in the first stanza. I can give the first two stanzas including the lines above it (all comments). Doesn't look like there is anything wrong here to me, although there is a bit of repetition.
Paul
------------------CSS CODE BELOW-----------------------------
// Cascading stylesheet for form elements such as buttons // "equal" and "clear" are two class names I gave for form buttons
Those are not CSS comments. CSS comments are enclosed between /* and */.
.equal { background-color: #4CAF50; /* Green */ border: 2px solid black; color: white; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .equal:hover { background-color: #aefe41; color: black; } .clear { background-color: #FF0000; /* Red */ border: 2px solid black; color: yellow; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .clear:hover { background-color: #FFABAB; color: black; } --- Talk Mailing List talk@gtalug.org https://gtalug.org/mailman/listinfo/talk
-- Chris F.A. Johnson, <http://cfajohnson.com>
Chris, Myles, and Howard: Thanks for your help. I didn't know that // wasn't a comment, my VIM editor seemed to highlught it that way, and it also seemed harmless as long as the CSS was still inside the HTML file. It seems that the checking is more strict if the code is in its own file. Anyway, many thanks! Paul On 2 Apr 2016 at 23:10, Chris F.A. Johnson wrote:
On Sat, 2 Apr 2016, Paul King wrote:
Hi
Sorry if this is off-topic, but I have been scratching my head for hours and have been frustrated with this error. I am writing this code just for myself.
The first stanza in my css code which I moved from HTML to an external css file does not appear to be read at all. This appears to happen whatever the first stanza is, and I have tried moving them around. All other CSS tags are understood, but only if they do not appear in the first stanza. I can give the first two stanzas including the lines above it (all comments). Doesn't look like there is anything wrong here to me, although there is a bit of repetition.
Paul
------------------CSS CODE BELOW-----------------------------
// Cascading stylesheet for form elements such as buttons // "equal" and "clear" are two class names I gave for form buttons
Those are not CSS comments. CSS comments are enclosed between /* and */.
.equal { background-color: #4CAF50; /* Green */ border: 2px solid black; color: white; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .equal:hover { background-color: #aefe41; color: black; } .clear { background-color: #FF0000; /* Red */ border: 2px solid black; color: yellow; padding: 4px 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 50px; } .clear:hover { background-color: #FFABAB; color: black; } --- Talk Mailing List talk@gtalug.org https://gtalug.org/mailman/listinfo/talk
-- Chris F.A. Johnson, <http://cfajohnson.com> --- Talk Mailing List talk@gtalug.org https://gtalug.org/mailman/listinfo/talk
| From: Paul King <sciguy@vex.net> | Thanks for your help. I didn't know that // wasn't a comment, my VIM editor | seemed to highlught it that way, and it also seemed harmless as long as the CSS | was still inside the HTML file. It seems that the checking is more strict if | the code is in its own file. The following is based on uneducated guessing. HTML is an area that I stay away from. HTML renderers are used to accepting crap and doing the best they can. It's part of the culture. If you want to check for errors, use some verifier: something tasked with being picky. It used to be that "validator" was useful. <https://validator.w3.org/> <https://jigsaw.w3.org/css-validator/>
| From: Paul King <sciguy@vex.net>
| Thanks for your help. I didn't know that // wasn't a comment, my VIM editor | seemed to highlught it that way, and it also seemed harmless as long as the CSS
ugh! "CSS" should have read "Javascript"! On 3 Apr 2016 at 10:12, D. Hugh Redelmeier wrote: <snip>
If you want to check for errors, use some verifier: something tasked with being picky. It used to be that "validator" was useful. <https://validator.w3.org/> <https://jigsaw.w3.org/css-validator/>
I have read articles on this, and I don't think validator is useless in itself. I think what people seem to feel is that validation (in the sense of linting) of code is something that these days are done in most text editors like brackets, vim and emacs. Indeed, vim is good at things like checking parens, but obviously, as has been demonstrated, not as good at flagging improper commenting. Validator "used to be useful" because coders are relying too much on their editing tools (like I just did), meaning that it is still useful if you are serious. I agree that browsers appear to be designed to too readily accept crap code as legit, and it creates an illusion of validator's irrelevance. Paul
On Sun, 03 Apr 2016 11:53:58 -0400 "Paul King" <sciguy@vex.net> wrote:
| From: Paul King <sciguy@vex.net>
| Thanks for your help. I didn't know that // wasn't a comment, my VIM editor | seemed to highlught it that way, and it also seemed harmless as long as the CSS
ugh! "CSS" should have read "Javascript"!
On 3 Apr 2016 at 10:12, D. Hugh Redelmeier wrote:
<snip>
If you want to check for errors, use some verifier: something tasked with being picky. It used to be that "validator" was useful. <https://validator.w3.org/> <https://jigsaw.w3.org/css-validator/>
I checked it by plugging it into one of my stylesheets. There are number of stupid things I have found that will make stylesheets not work. Attaching more than one stylesheet to your HTML code has interesting results. This is easy if you are using a graphic HTML editor. This is one of the many advantages of VI. -- Howard Gibson hgibson@eol.ca howard.gibson@teledyneoptech.com jhowardgibson@gmail.com http://home.eol.ca/~hgibson
On Sun, 3 Apr 2016, Howard Gibson wrote:
On Sun, 03 Apr 2016 11:53:58 -0400 "Paul King" <sciguy@vex.net> wrote:
| From: Paul King <sciguy@vex.net>
| Thanks for your help. I didn't know that // wasn't a comment, my VIM editor | seemed to highlught it that way, and it also seemed harmless as long as the CSS
ugh! "CSS" should have read "Javascript"!
On 3 Apr 2016 at 10:12, D. Hugh Redelmeier wrote:
<snip>
If you want to check for errors, use some verifier: something tasked with being picky. It used to be that "validator" was useful. <https://validator.w3.org/> <https://jigsaw.w3.org/css-validator/>
I checked it by plugging it into one of my stylesheets. There are number of stupid things I have found that will make stylesheets not work. Attaching more than one stylesheet to your HTML code has interesting results.
Attaching more than one stylesheet to your HTML code has well-defined results; it is a very common practice..
This is easy if you are using a graphic HTML editor. This is one of the many advantages of VI.
s/VI/ANY text editor/ -- Chris F.A. Johnson, <http://cfajohnson.com>
participants (5)
-
Chris F.A. Johnson -
D. Hugh Redelmeier -
Howard Gibson -
Myles Braithwaite -
Paul King