IE does not understand CSS inheritance

Question

I have a problem with Internet Explorer and of course it works prefect in other browsers. So I have a CSS clases. I am making a something like a frame which has got a left, middle and right part, but with three different color schemes. So I don't want to make 9 different classes and I use CSS power like this example:

.container-header .left { /* Some styles here... */ }
.container-header .left.style1 { /* Some styles here... */ }
.container-header .left.style2 { /* Some styles here... */ }
.container-header .left.style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .middle.style1 { /* Some styles here... */ }
.container-header .middle.style2 { /* Some styles here... */ }
.container-header .middle.style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .right.style1 { /* Some styles here... */ }
.container-header .right.style2 { /* Some styles here... */ }
.container-header .right.style3 { /* Some styles here... */ }

Everything was perfect and then I opened Internet Explorer. In my HTML I have a simple construction like this:

<div class="container-header">
    <div class="left style1"></div>
    <div class="middle style1"></div>
    <div class="right style1"></div>
</div>

The problem is that IE has got own opinion and skip all of the CSS styles before the last element in the code. I mean that left style1 and middle style1 are rendering with the right style1 styles. I have no idea how to make IE to read the styles before this and not to skip them. I will be very happy if anyone write his opinion. Thanks :)

PP: Sorry for my bad English. :(

Community · Accepted Answer · 2017-05-23 12:27:53Z

7

Your page is probably in quirks mode, so you need to add a doctype declaration to your page for it to render in standards mode.

Quirks mode in IE has a bug that causes it to read only the last class in a chain of class selectors, so it's treating your rules like this:

.container-header .left { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .middle { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

.container-header .right { /* Some styles here... */ }
.container-header .style1 { /* Some styles here... */ }
.container-header .style2 { /* Some styles here... */ }
.container-header .style3 { /* Some styles here... */ }

This also affects IE6 in standards mode, for which the only workaround is to assign unique classes to your HTML elements. Also see this answer for an illustration.

As a side note, this isn't an inheritance error, but a cascading error (or rather, a selector parsing error resulting in bad cascading).

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Sep 24, 2012 at 16:15

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MaxPRafferty Over a year ago

the following page describes the issue succinctly: ryanbrill.com/archives/multiple-classes-in-ie

valkirilov Over a year ago

I am using IE9 but really my doctype is missing. Thanks for the fast answer and sorry about my stupid mistake. Thanks

Collectives™ on Stack Overflow

IE does not understand CSS inheritance

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related