Viewing Thread:
"CSS body being ignored"

Hi,
My page loads an external style sheet, all of which works well and so i know it is being loaded properly. The only problem is that i cannot get anything in the BODY {

}

to work properly.
In order to get my page's background to show i have to add this css to the html source of my page, and so i know i haven't made any errors. I.e the link to the background is correct-


body
{ background-image: url("/images/background.jpg");
}


This problem seems to occur for anything i include in the BODY tag as i have also set the default font for my webpage in this tag. It works when the CSS is included directly on the page, but not when loaded externally.

Please help!

Hi,
My page loads an external style sheet, all of which works well and so i know it is being loaded properly. The only problem is that i cannot get anything in the BODY {

}

to work properly.
In order to get my page's background to show i have to add this css to the html source of my page, and so i know i haven't made any errors. I.e the link to the background is correct-


body
{ background-image: url("/images/background.jpg");
}


This problem seems to occur for anything i include in the BODY tag as i have also set the default font for my webpage in this tag. It works when the CSS is included directly on the page, but not when loaded externally.

Please help!

That sounds pretty odd. You can use the !important rule which should overrule any styling being set elsewhere.

For example, in your external stylesheet:

body {
background-image: url("/images/background.jpg") !important;
}

Finding the cause and fixing that is probably a better solution though.

A good method we use to track down the cause of this kind of problem is to use Firefox and install the Firebug extension. You can the use the 'Inspect' feature and select the tag in the HTML pane. In the right hand pane it will then list any CSS that is being applied to the element. Rules that are being overridden are shown as crossed out. This then gives you a good idea as to what is overriding you style and you can then go and fix it.

Also a tip, use:

body {
background-image: url('myimage.jpg') repeat-y;
background-color: #999999;
}

Setting the background-color will let you know if you have got the image URL wrong as the colour will still show.

Thanks for your suggestions, but it still isn't working. Everything in my stylesheet will load and work, except this coding-



body
{
background-color:#3D3838; !important;
background-image: url('/images/background.jpg'); !important;
background-repeat: repeat;
background-attachment: fixed;
font-family:century gothic; font-size:10px; color:#717171;
}


I know that all the links to the images work, and that the problem must lie somewhere with the css i am using? What's more, the coding for the font wont work when placed here either.
It will however work when placed on the page itself!

Hi,

You've put an extra semicolon before the !important which will stop the important rule from having any effect. I'm pretty sure this will fix your problem.

I totally agree with Eccles' suggestion to download the Firebug extension for Firefox though. It makes developing in CSS so much easier when it comes to ironing out those little problems that seem to happen for no reason.

Any chance of a link to the page in question?
The !important rule will only work in Gecko based browsers like Firefox so that won't solve the problem in IE and other browsers.

Few things I would check right away:

1) make sure there is no in-line CSS rule set in your or tags, as these override rules from external stylesheets.

2) make sure you don't have rules for BODY or HTML in the