CSS not being read by Firefox, Chrome & Safari

[DaveTheSinger]

Firefox, Chrome and Safari wont implement the CSS doc for my website. I am self taught and sometimes lose the meaning of what people write as I only have a partial grasp of all the abreviations, letters & numbers used in these posts.
I have checked the coding of my webpage and CSS doc with a W3C CSS code validator and all have passed. The website displays as designed in IE7, IE8 & IE9 and a few others such as Avant, but when I check the site on browsershots.org Firefox, Safari & Chrome all apply their default text which is black but my background is also black hence no text visible. There are other text issues that are all caused by not recognising the css doc.
I am hoping its something simple to alter in the header code.
Can anyone walk me through what I need to do to get a solution?
I'd really appreciate it as it's driving me insane? You can check out the website at www.classixrock.com
Many thanks
Dave

[JorgeM]

I see that you are applying the "normal-text" class to the table. Just out of curiosity, try applying this class to the paragraph <p> element directly, see the results.

[DaveTheSinger]

Hi ITG-JM
I have tried applying "normal-text" to the paragraph element but there was no change.
There are other issues such as the navigation buttons are defaulted to blue underlined text and not how I want them to be displayed.
The relevant CSS code is below:-

.navigation1   {font-family: "Copperplate Gothic Bold", Rockwell, serif;
                font-size: 15px;
                color: silver;
                text-align: center;
                font-weight: bold;
                border: 1px solid silver;
                background: url(images/flamepanel2.jpg);}

.normal-text   {font-family: "Comic Sans MS", Tahoma, Arial, "sans serif";
                font-size: 14px;
                color: white;
                text-align: justify;}

So...Firefox, Safari and Chrome seem to ignore the CSS doc as if it's not there.
Any ideas?

[Dani]

You probably already ruled this out, but by any chance do you have custom CSS being set by your web browser?

[JorgeM]

I accessed the site and validated that the CSS isn't applying at least not with Chome, but OK with IE. not knowing what your HTML and complete CSS looks like, I would suggest you set up another test page and start adding in the components until the CSS breaks.

[DaveTheSinger]

Hi cscgal
Thanks for contributing.
I created the CSS doc from scratch so does that mean it is or it isn't a custom CSS set by my browser?

Hi ITG-JM
You can of course access the html from my web pages but the CSS doc is just more of the same of the snippet I posted above (and has been validated).
Could the font used in the CSS doc itself be the cause?

[JorgeM]

This is weird...Ok, so I had a chance to get a copy of your HTML and CSS file, put it into my visual studio and run the page locally. Tested it from IE and Chrome and both browsers and the text showed up in white as expected.

However, when I access your site from the same Chrome browser, no CSS.

Therefore, from my test, it appears that your HTML and CSS are OK! This is either a webserver problem, or maybe there is an application firewall in front of this web that is stripping off the CSS. I would suggest that you contact your provider and see if they can trace this through their firewalls. You want to ask them if any packets are dropping for the target: URL - http://www.classixrock.com/classix.css. This is a possibility with an application layer firewall or a firewall that has IPS in place. could be a false positive triggering this...of course its just a hunch as I see no other reason why this could be happening.

see attached picture which is a snapshot from my Chrome browser running your page locally on my machine. Of course there are no pictures, but you wil notice that the CSS applied just fine.

[|-|x]

It looks to me like it might be a charset configuration problem. If I view the CSS file in Chromes dev tools it shows up as Chinese text. The charset might be specified in the file itself or possibly in the web server where it is storing/delivering the file.

Check out the screenshot to see what I'm talking about.

[JorgeM]

So i validated this as well just now in my Chrome tools. I actually downloaded both his HTML code from the main page and his CSS file, and as I discussed earlier, it ran OK on my dev platform.

I would then tend to agree with you that this is most likely with the webserver and not the code? you mentioned specifying the character set in the file, but you didnt mean CSS file itself?

I am not as strong in web development as other areas so I am definately interested in figuring out what the problem is here.

[|-|x]

It could be on the css file itself, at filesystem level.

Imagine you are saving the css source code in a text editor. At the file save dialog, in some editors you can specify the character set of the file, ie: ascii, utf8 etc. If this has been set to something that conflicts with the web pages delivery as specified in the HTML source, this may cause the browser to interpret the css file contents incorrectly.

When I saved and opened the file I can see that it has been saved in a UTF8 format. The browsers default interpretation may not be detecting this.

Possible solution: You can specify the charset in the link tag. (Note the link tag should also have a close backslash, not sure if this may be affecting the functionality as IE can sometimes be more lenient on invalid HTML.) See this page for more details, but I would try something like this.

<link rel="stylesheet" type="text/css" charset="utf-8" href="http://www.classixrock.com/classix.css" />

[JorgeM]

thanks for the explanation, we'll wait on Dave to check on that.

[DaveTheSinger]

BRILLIANT! BRILLIANT!!! Hearth you are a star!!! Having had all the HTML and CSS code validated I suspected it might be something in the header code and Hearth nailed it! Simply moving the charset within the link tag was all it needed.
Irritating that my HTML book skims over positioning of said charset!
Having checked my webpage with www.browsershots.org all browsers are displaying as I want (apart from one or two that dont support my first font type so they use the second font in the family - but I'll take that, no problem).
Thanks also to ITG-JM for your input, much appreciated - your thoughts stopped me going down a couple of dead ends and I was also starting to doubt the webserver.
This is the first time I have posted on any forum and you have no idea how grateful I am for having this solved.
I shall certainly be recommending this forum to anyone else who has website issues.
Thanks all.
Rock & Roll
Dave

[|-|x]

Hi Dave, glad to be of help and that you found your experience here at Daniweb to be positive - it's a great community.

One final note for your site; I would recommend also specifying the charset for your html code to ensure continued successful interpretation by the widest possible range of browsers. You can specify the charset in both the meta tag <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> as well as the link tag for your stylesheet.

All the best!
/H

[JorgeM]

Great job Hearth!