CSS won't apply

CMS & WordPress
1

So, I had everything working fine here and now for some reason the css isn’t being applied to the site. If you view the page source then you will see the css file and the link to it works, but for some reason it isn’t applying?

http://connect4webdesign.com/wp-content/themes/Connect4/css/styleONLINE.css

2

Oh…a friend gave me a hint and its because I was missing this at the top of the css file

@charset “utf-8”;
/* CSS Document */

3

I lied. It didn’t work

4

You could try fixing the CSS http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fconnect4webdesign.com%2Fwp-content%2Fthemes%2FConnect4%2Fcss%2FstyleONLINE.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
and the mark-up http://validator.w3.org/check?uri=http%3A%2F%2Fconnect4webdesign.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

5

Thanks. I will use that for now on. The missing parentheses was messing it up.

6

Ok your css has got errors

If you see right at the top

body {
	width: 100%;
	margin: 0 auto;
background-image:url(http://Connect4WebDesign.com/wp-content/themes/Connect4/images/PatternBackground.png;
}

You have not closed the url for background correctly. at the end its missing the closing bracket ) so if you add that it should fix your issue.

7

Much better looking :slight_smile:

I am a bit surprised though. I thought broken CSS only affected the part that had bad syntax (i.e. ignored) and the rest was still applied.
But apparently it can have much more dire effect.

@Paul_O_B; comment?

8

It would make more sense for it to only affect the specific class, but none of the CSS was working. thx

9

Once things are off balance, there’s little chance of righting the ship. Usually I find that an error like this invalidates the rest of the style sheet.

10

Yes, in general the browsers are restoring the CSS in the next line after a “normal typo” (f.i.: 36p instead of 36px, hieght instead of height, etc.).
But if the error is in the punctuation itself, it can be worse!

Here after the opening bracket for the url(… the CSS was waiting in vain for the closing ), followed by a } for the end of the tag properties.
So everything before a ) had to be ignored. The other pairs were in balance: first the opening ( bracket, and afterwards the ) bracket. Therefore the closing ) bracket of a later url(…) didn’t help.

If you put somewhere in between a Wild West ), then the css after that will go on.

What happens:

  • In line 21 of the source code the ) is missing.
  • The html font-size, the #ContentContainer styles, the Content styles, the img styles, the #Header styles and the #ConnectList styles are ignored.
  • In line 80 the missing ) is added.
  • Starting with the styles for the #ConnectList li (the header links), the rest is working again as indicated.

But in the meantime the site has [U]valid css[/U]: no errors! :slight_smile:

11

No need the others have beaten me to it with good explanations:)

That’s why it pays to always validate as just one missing bracket can corrupt what follows.