CSS question: why my css stylesheet selector not working?

Question

I have the following HTML:

<div id="graphicArea">
    <div id="page1" class="pageArea land"></div>
    <div id="page2" class="pageArea land"></div>
</div>

my CSS stylesheet file snippet (this works):

.pageArea {
    width:220px!important;
    height:210px!important; 
 }

my CSS stylesheet file snippet (this don't work):

.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

neitheir this works:

div.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

There is not much in this file further on, so I'm pretty sure it's not overriding the css. Anyone know why cant it work?

Thanks.

EDIT

All this css is within @media print { .. }. I don't think its relevant though.

EDIT2

Does FF has any issue regarding setting a div height/width in mm? I guess that's the whole point...

Answer 1

You have to put a space before .land.

So, instead of .pageArea.land, say .pageArea .land in your CSS.

Answer 2

.pageArea.land means that the element you're targeting has 2 classes, pageArea and land.

How is your HTML laid out? Is .land a child of .pageArea? If so you just need a space between them, i.e.

.pageArea .land { .... }

Answer 3

you have the dot of land in the pageArea , It must look like div.pageArea, .land

Answer 4

Try this:

 <div id="page1" class="pageArea land"></div>


.pageArea {
    width:220px!important;
    height:210px!important; 
 }

.land {
    width:220px!important;
    height:210px!important; 
}

Answer 5

According to the CSS 2.1 specification, your code should work. Are you using Internet Explorer 6?

edit 1: .class1.class2 works with Chrome, and probably other browsers as well. Are you sure your selector is not working? Try "display: none" to be really sure.

Answer 6

You have to have a space between .pageArea.land like this .pageArea .land You can try the following css structure
div#page1 .pageArea{ css goes here }

div#page1 .land{ css goes here }

div#page2 .pageArea{ css goes here }

div#page2 .land{ css goes here }

Answer 7

Use Firebug to determine which styles are influencing the final appearance of these elements, once the cascade is applied.

Given the small snips HTML and CSS you've given us, it looks alright, yet you are telling us that you're not getting the desired result. Add to that your superfluous use of !important, and I think it's safe to conclude that your stylesheet contains many conflicting properties that aren't shown in your code sample, and one or more of them are influencing .pageArea.land.

Answer 8

EDIT All this css is within @media print { .. }. I don't think its relevant though.

If it's in @media print { } the css will be applied when PRINTING

To have it be applied in the browser use @media screen { }

And if you want to see it in both print and on screen use @media screen, print { }