IE 11 picks up only some css rules but not others

Question

I have a <thead> that is not displaying its background colour. Yet all other CSS rules work as normal. Here is the code i've written

HTML file:

<link rel="stylesheet" href="css/General.css">`
...
<thead class="tableheader">

In my externally referenced CSS file:

.tableHeader {
    background-color: #428bca !important; /*blue*/
    color:white;     
}

This works fine in all other browsers except ie 11. In the DOM explorer of developer tools, i can see it has picked up other rules from my css file so im not sure why it would skip this one. Any ideas?

EDIT: ok obviously i cant read.. The css rule has a capital H.. but.. my question is still the same. Why the different behaviour? why are some browsers case sensitive and others not?

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

You are using camelCase in your css, yet the class name is not camelCase. HTML is case sensitive.

Example

.elementa {
    height: 50px;
    width: 50px;
    background: red;
}

.elementA {
    background: yellow;
}

<div class="elementa">
</div>

edited May 23 '17 at 12:03

Community

1
1

answered Nov 02 '15 at 04:11

justinw

3,856
5
26
41

seems that chrome and firefox are case-insensitive. Thanks – Notaras Nov 02 '15 at 04:15
@kapetanios I have to submit my edit, I should have said that while css is generally case *insensitive*, html *is* case sensitive - as stated in the link I provided - glad it helped – justinw Nov 02 '15 at 04:17

score 1 · Answer 2 · answered Nov 02 '15 at 04:12

You have different class name in css (tableHeader) and html (tableheader)

.tableHeader {
    background: #428bca !important; /*blue*/
    color:white;     
}

<table>
  <thead class="tableHeader">
    <tr>
      <th>
        skdksl
      </th>
    </tr>
  </thead>
</table>

IE 11 picks up only some css rules but not others

2 Answers2