CSS - overriding default style not working

[nigelt74]

Okey doke site is here

http://darncat.com/

The categories and the information box are the issue i cannot seem to override the css, for the bottom of the boxes, they are currently showing as beige rather than cream (categories), blue (information)

I have successfully over ridden the tops and middles of those boxes, but using the same technique doesn't work for the bases.

The code I am using for the bottom of the category box is

#categories .leftBoxContainer { 
background-image: url("../images/categories-bottom-cream.jpg");
}

which should work, as I used a very similar code to change the colour of the top

[kobra]

I do not see where you have defined a position for this as bottom or any other location???

[nigelt74]

Kobra - I am not understanding your response.

The beige bottom is displayed using the following code

.leftBoxContainer {
background-image: url("../images/sidebox-bottom.jpg");
.....
}

so to override it for the categories box, i should be able to override it with


#categories .leftBoxContainer {
background-image: url("../images/categories-bottom-cream.jpg");
}

The above code is in the stylesheet, but isn't being seen for that element so i am obviously doing something wrong

I used similar code for the tops and middles and they worked.

If the others can be overridden via css and using the id, then surely the bases should be too?

[kobra]

surely the bases should be too

.leftBoxContainer is the whole box not just the "base" and why I looked for a "position" Of course I do not know what the image looks like but if taller than some/most side boxes than by default it aligns to the top of the container and then your bottom image is bleed off

Might have a look at how this is done in the future zen template

[nigelt74]

.leftBoxContainer is the whole box not just the "base" and why I looked for a "position" Of course I do not know what the image looks like but if taller than some/most side boxes than by default it aligns to the top of the container and then your bottom image is bleed off

Might have a look at how this is done in the future zen template

I fully understand leftBoxContainer is the whole box, but the default beige one works, so shouldn't the override work as it will use the position from the default .leftBoxContainer.

Infact, if i copy the entire default .leftBoxContainer to #container .leftBoxContainer changing the image name, it still doesn't work.

[nigelt74]

Ok solved, but i don't understand why


changed

#categories .leftBoxContainer

to

#categories.leftBoxContainer

note no space between the id and class

But how come, when I was overriding the tops

#categories .leftBoxHeading

works fine? and should i be removing the space on those?

Dammit I thought i had finally got a handle on CSS