IE 7 - Bug on css class inheritance

Question

IE 7 - Bug on css class inheritance

80 views Asked by Guilherme Soares At 12 December 2013 at 19:26

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?

Original Q&A

There are 2 answers

kapa On 03 January 2014 at 11:54

IE7 supports the multiple class selector.

I suspect the problem is that you are not using a DOCTYPE in your HTML, so browser rendering is switched to quirks mode, which is something you would like to avoid.

You should simply add this as the first line of your HTML:

<!DOCTYPE html>

This is the DOCTYPE for HTML5, but it does not really matter, it will work fine in IE7 and trigger standards mode instead of quirks mode.

**WayneDenier** · Accepted Answer · 2013-12-12 19:53:15

WayneDenier On 12 December 2013 at 19:53 BEST ANSWER

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

TechQA.

IE 7 - Bug on css class inheritance

The Problem

Code

There are 2 answers

Related Questions in CSS

Related Questions in INTERNET-EXPLORER

Related Questions in INHERITANCE

Related Questions in INTERNET-EXPLORER-7

Related Questions in BACKGROUND-POSITION

Popular Questions

Popular Tags

Trending Questions