CSS not processing

HTML & CSS
1

Weird. But I must be missing something. I have an HTML doc using some css for formatting and the css is ignored; it simply won’t show/work. Ideas are most welcome. Here it is in action: http://chea-elks.org/donations/index.html (the key is test/bogus so it can’t be processed)

Here’s the css:

@charset "utf-8";
.cheadonations {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
}
input, textarea, select, button {
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}
input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;
  border  : none;
  padding : 2px 110px;
  margin  : 1px 2px 5px;
  background: none;

}

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 600px;
    text-align: right;
}
2

I’m currently unable to view your page (network blocked.) Are you sure you wrote the include correctly?

<link rel="stylesheet" href="//chea-elks.org/path/to/style.css" type="text/css" media="screen">

HTH,

:slight_smile:

3

No. I just have this:

<link href="http://chea-elks.org/donations/cheadonations.css" rel="stylesheet" type="text/css">

I’m seeing that you have a rel=“stylesheet” in the front, and am guessing that’s required? Also why media=“screen”?

4

The order of the attributes is not important. Media isn’t required, but it’s good form.

So… you have a file “cheadonations.css” located in the /donations folder? It’s not in its own folder?

I’d have to see more code. But what you’ve got, so far, looks like it should be working (as long as the path to the CSS file is correct.)

V/r,

:slight_smile:

5

Remove this comment

/* For legacy (Firefox <29) Gecko based browsers */

In your CSS file.

It is correct.

6

The CSS comment is breaking it???

V/r,

:slight_smile:

7

The CSS is being read.

8

It appears so. I copied his CSS file and pasted it into dev tools, and I got hte following display.

906×200 26.4 KB

So as you can see, the rest of hte CSS file is being ignored due to that comment.

9

OK, I took the advice. I renamed the css file to style.css and made the changes suggested, and removed the comment. It’s up again but still no change.

10

I still see the comment in the CSS file.

https://chea-elks.org/donations/cheadonations.css

11

try it from the baseline link, I dumped cheadonations.css in favor of style.css

12

Then you need to update your HTML to call style.css. This is still on the live site.

<link href="http://chea-elks.org/donations/cheadonations.css" rel="stylesheet" type="text/css"
13

I assume this means the link in post #1.

14

o i c

15

It appears < is an invalid character in a CSS comment, while > is not. That’s interesting.

1 Like
16

OK looked at this in a fresh google instance, It appears correct.

1 Like
17

Also I noticed that when I looked in Firebug I found this comment at the bottom of my screen:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

18

There may be a little more to it than that because the page runs OK on my PC if the CSS is here, also.

Perhaps the “<” symbol is being misinterpreted by the server and needs to be written &lt; even though it’s in a comment.

19

Yeah, considering I didn’t find any information about > being invalid in a CSS comment, something wasn’t adding up.

20

So it’s nothing in style.css, right?