CODEWITHSUNDEEP
htmlcssinternet-explorer
valkirilov
valkirilov

Reputation: 1853

IE does not understand CSS inheritance

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. :(

Upvotes: 0

Views: 379

Answers (1)

BoltClock
BoltClock

Reputation: 724132

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).

Upvotes: 7

Related Questions