Why does my :after override class not work in IE10 & IE9?

Question

I have a class that I am extending with another class name (that contains more specific changes). For some reason the original rule is not being overwritten in IE9 and IE10, but it works in every other browser including IE8!? The style sheet containing the overriding class (style) is also referenced after the the stylesheet where the original class is located.

The original class is: .panel:after { content: "" , etc...}

The new class is: .panel.sales-tip:after { content: "\\E006", etc... }

Internet Explorer Web Inspector: The web inspector shows the following information. Why does are both classes seemingly disabled but when I unchecked the ".panel:after" the other style then works, and does it thing. Any ideas? Thanks!

Answer 1

I found out that it was because I had this rule — font-size: 0px — in my .panel:after declaration, and it wasn't being overridden by the new font-size: 2.2em rule in the .panel.sales-tip:after declaration.

I ended using a fixed size of font-size: 35px in the .panel.sales-tip:after declaration.

I'm glad that fixed the problem, but does anybody know why it wouldn't override? Just curious. Thanks!