Background override problem

[SJH]

I'm having a bit of trouble overriding the background on a particular DIV.

I've added a class="nobg" attribute to the DIV tag, and have put the following style definition in my CSS file:

.nobg { background:none; }

However the background still shows in Internet Explorer (not in FF).

Anyone got any idea why this is happening? I can't provide a URL as it's on a password protected site unfortunately.

-Sam

[Buddy Bradley]

Specificity.

You've probably got a more specific declaration in your CSS file that is overriding that one, or appears after that one. Try moving the declaration to the end of the CSS, and maybe add the DIV name to it.

[Paul O'B]

Hi,

It sounds line a specifity issue. The style that targets the element may be carrying more weight than a simple class and will be over-ridden.

You will need to drill down to the element to add more weight to it assuming of course that this is the problem. If the div has an id or the parent has and id then use that to add weight to the class.

e.g.

#parent_id div.nobg {background:none;}

If all depends whether the original style has even more weight so you may need to drill back a level etc and your class carries more weight than the original.

If the id is in the same element. e.g.

<div id="coloured_bg" class="nobg">text</div>

Then you need to target it like so.

#coloured_bg.nobg {background:transparent}

Without any code to go on I can't give a specific example for your case

[SJH]

That worked a treat, Paul.

I changed my original style to read:

div#container.nobg { background:none; }

And everything seemed fine

-Sam