Overflow CSS issue in Firefox and IE

Question

I am working with the class that holds info for many pages. This is the main content of the class:

.class {     
    margin: 1% 0.5%;
    padding: 10px;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    overflow: auto;
}

When I try to add a class in the style sheet class="class class1" that nullifies the overflow property, it won't work in IE and Firefox.

.class .class1 {     
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

In Chrome and Safari, overflow is removed from the cascade. In IE and Firefox only the .class is picked up.

Any ways around this other than redesigning leaving out overflow?

Thanks.

Answer 1

If your HTML is class="class class1" then the selector is wrong.

This

.class .class1 { /* with space */    
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

should be this

.class.class1 {    /* no space */  
        margin: 1% 0.5%;
        padding: 10px;
        border: 1px solid #E3E3E3;
        box-sizing: border-box;
        overflow: auto;
    }

The space between your original declaration indicated that class1 was a descendant of class.

The second option I showed (with no space) means that the element has both classes and only applies in that instance.