[CLOSED] How to override CSS when ExtJS renders different styles / elements for different browsers

I want to change the background of the active tab. I created a style that works great in IE9. However, the same style breaks the IE8 tabs and in Chrome, it doesn't do anything. So as a general rule, what's the best way to override styles? In IE8, ExtJS renders tables for tabs but in IE9 and Chrome, it uses divs and HTML5 styles to achieve round corners.

Code:

---

.x-tab-active .x-tab-inner {   
    font-weight: bold !important;
}


.x-nlg .x-tab-active {
    background-image: url('../Images/Common/activetab.png') !important;
    box-shadow:none !important;
    border-top-color: $border-color-hl;
}

---

Hello!

It's much better to render controls using HTML 5 and new CSS features. Unfortunately, there are many people who use old versions of IE which do not know anything about HTML 5 and have many bugs. For old browser Ext JS uses old tools like tables.

General rule is to use CSS. Ext JS adds to the body tag special classes which help to add CSS for certain browser. In case of IE9 and IE8 you can use "x-ie9" and ""x-ie8" classes. But you should understand that body tag in IE9 will have tags of all previous version of IE : " x-body x-ie x-ie7p x-ie8p x-ie9p x-ie9 x-ie9m x-nlg". For example:

Code:

---

<style>
        .x-ie8 .x-tab-inner {
                color: #008000 !important;
        }

        .x-ie9 .x-tab-inner {
                color: #ffff00 !important;
        }
</style>

---

thanks! this helps. do you know what x-nlg stands for?

Quote:

---

Originally Posted by jchau

thanks! this helps. do you know what x-nlg stands for?

---

According to this thread: http://www.sencha.com/forum/showthread.php?127665

x-nbr - browser doesn't support CSS3 Border Radius
x-nlg - browser doesn't support CSS3 LInear Gradient

It helps to support legacy browsers