Question

I have below CSS code in my CSS class.

.ie8 html, body {
padding-left: 140px;
}

html, body {
padding-left: 0px;
}

Here html,body is the last entry. So, for ie8, html, body is getting applied.

Now, if I swap them, then .ie8 html, body will be the last entry. So, for Chrome and FF, .ie8 attributes are getting applied.

CSS file is referred externally from web server.

How to solve this?

Answer 1

As Musa says, .ie8 html, body will apply to two distinct things:

• a html element that is under class ie8 element (which probably does not exist, since html should be the top element)
• and every body element (ie8 class selector does apply here).

Thus, you have two rules handling body, and the second one overwrites the first. If you switch them around, the effect changes. You probably want html.ie8 body, or .ie8 body (for just body element), or html.ie8, html.ie8 body, or .ie8, .ie8 body (for both html and body elements).