What is the proper way to style tabs?

[BillHubbard]

I'm having difficulty styling tabs. In Firefox, my styles show up, but in IE it looks like it's picking up the default ExtJS styles.
There appears to be a radical difference between how tabs are rendered in FF vs. IE, as there is a simple div structure in FF, and a complex table structure in IE. (Really? Tables?! What the...?) I can't figure out where the style is getting picked up, as my tab color gets applied in IE, but is getting overridden by something else, so I don't see it.

What is the proper approach to styling widgets (tabs in this case) in ExtJS when the markup is so vastly different between browsers?

[tobiu]

take a look at the theming guide:
http://docs.sencha.com/ext-js/4-0/#!/guide/theming

FF and Chrome are quite good with CSS 3, IE is still not in version 9 -> not able to do gradients and border radius.

that is the reason, there is a slice images method -> a headless webkit generates automatically the needed images for IE to make the theme look like in other browsers.

[BillHubbard]

So, if I get what you are saying, I can't just use CSS to style tabs - I have to take some manual step to create images for IE? That's just wrong. What's the alternative?

[bt_bruno]

IE simply doesn't implement the CSS features required. That's why we have ugly table structure bounded to image sprites.

Prior to Ext 4 you had to do it completely manually, cutting images in Photoshop, etc... Now we have a tool that emulates a browser, and do all the heavy job for us. It is described in our theming guide (http://docs.sencha.com/ext-js/4-0/#!/guide/theming), under "Supporting Legacy Browsers"