Home/ Questions/Q 8627643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:19:55+00:00

I have a problem with Internet Explorer and of course it works prefect in

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0