IE 7 - Bug on css class inheritance

Question

The Problem

I created the keyboard with 2 kinds of keyboards (alphanumeric, numeric) but when I test my script there appears to be an inheritance bug with CSS in IE 7. I used the class .backspace to segregate the two types of keys but they still inherit the background-position from .backspace

Code

Css code

key

.keyboard-table.numeric .key-element{background-position: 5px -90px}
.keyboard-table.numeric .key-element.keypressed{background-position: 5px -210px}

.keyboard-table.numeric .backspace{ background-position: -295px -90px}
.keyboard-table.numeric .backspace.keypressed{background-position: -295px -210px;}

Html Code

<div class="keyboard-column">
  <span class="key-element" ascii-code="48" style="margin: 5px 0px 0px 5px; width: 300px; height: 112.5px;">
    0
  </span>
</div>
<div class="keyboard-column">
  <span class="key-element backspace" style="margin: 5px 0px 0px 5px; width: 640px; height: 112.5px;">
    ← Apagar
  </span>
</div>

Please, how can i fix this bug?

Answer 1

I don't think IE7 supports side-by-side sibling selectors. So these won't work...

.backspace.keypressed

You may want to add .keypressed to the keyboard-column instead and then use..

.keypressed .backspace