.css with Mozilla woes...

jordanmcclements · #1 (**permalink**) 05-21-2004, 12:43 PM

I decided to start learing CSS as it was becoming a real pain to try to change the layout / colour scheme ever increasing count of web pages. I started with a fairly basic css file that had the font size and background colour etc etc, and tried this on my index.html.

It seemed to work fine, so I changed all my html files to use my new 'style.css' file. I was really pleased with the way I could change the background colour etc of every web page now by just changing one file. It really did work perfectly in IE and Opera.

Then, just as I was saying to myself "this is going much more smoothly than I had anticipated', and feeling generall smug about things, I tried it on Mozilla...............

Cue about 4 hours of messing around to no avail... Eventually, I took out all the tables, and fancy font declarations etc etc in my code, until eventually I had my code pared down to the following:-

(the following is saved as 'style.css'
in the same folder as my index.html file)
---------------------------------------
<style type="text/css">

</style>
---------------------------------------

(The following is saved as'index.html')
---------------------------------------
<html>
<head>
<title></title>
<link rel="StyleSheet" href="style.css" type="text/css">
</head>
<body>
This is a test......
</body>
</html>
---------------------------------------

And STILL it will not work for me in Mozilla (or Firefox) - both are the latest versions.

I have to admit that I am starting to get dissilusioned with the whole css thing!

NB the css file is definitely being read by mozilla because when I change the font properties in the css file, it picks these up OK....

Is there somehting really stupid that I am missing?

ChrisRC · #2 (**permalink**) 05-21-2004, 01:12 PM

You shouldn't have <style> tags in an external CSS file. This is probably what's causing your problem.

<style> is an html/xhtml tag, not CSS. You also don't need the SGML comment delimiters () in your external CSS.

Quote:

when I change the font properties in the css file, it picks these up OK

Are you sure about that? I tried it to no effect.

M0rtym0use · #3 (**permalink**) 05-21-2004, 01:15 PM

jordanmcclements,

in the .css file you don't need the style tag or comment code as follows...

< style type="text/css">

< /style>

The below will do the job.
you do not need to put each declaration on a seperate line but it does make it easier to read and make future changes to..

BODY
{
background-color: #404060;
}

hope this helps

MM

jordanmcclements · #4 (**permalink**) 05-24-2004, 05:51 AM

Thank you both very much.

I knew it had to be somehting really simple.

(I promise to do a bit more research in the future before implementing something I don't fully understand....).

ChrisRC · #5 (**permalink**) 05-24-2004, 09:21 AM

Hey, mistakes are a great learning tool. Those 4 hours banging your head against that brick wall can sure give you a headache though:)

(If you've ever seen discussions where designers complain about IE supporting 'bad code' as if it were OK, here's a good example of why.)

jordanmcclements · #6 (**permalink**) 05-26-2004, 08:43 AM

ChrisRC :-) - I agree.

In answer to your previous question: Yes, I am certain about the font changing but the background colour not changing when the above format for the external .css file was used - I have just tried this again, and this is definitely the case.

(Very strange).

M0rtym0use · #7 (**permalink**) 05-26-2004, 10:41 AM

jordanmcclements,
a few things you could try...

remove the last ; before the closing of brackets

also this address may be helpful to yourself.
http://www.blooberry.com/indexdot/ht...cssmapping.htm

hope this helps...

jordanmcclements · #8 (**permalink**) 05-27-2004, 10:44 AM

Thanks,

I got it all working by removing the '<style type="text/css">
<!-- '

part of the external css file. But I was just commenting on the fact that it was bit strange that parts of the file were picked up by Mozilla and others were not (when using the incorrect format for an external css file).

Thanks again.

odujardin · #9 (**permalink**) 05-28-2004, 07:57 AM

Beware! The reason why the font change works in your environment is probably because you have this font installed on your computer. Try to upload your changes and test them from computer lambda and you may not see your font at all!