Ext version tested:
  • Ext 4.1 rev RC3

Browser versions tested against:
  • IE9
  • FF11 (OS X, Windows)
  • Safari 5.1.5
  • Chrome 18.0 (OS X, Windows)

DOCTYPE tested against:
  • html

  • Following the directions in the Theming Guide to setup a simple project, IE9 ignores $base-color, $button-default-base-color, and probably others. I realize this might be an IE bug but still thought it was worth posting here.

Steps to reproduce the problem:
  • Create a new Ext JS project, add a simple panel & button
  • Follow the instructions in the Theming Guide to switch over to using SASS/Compass
  • Change $base-color & $button-default-base-color in your SCSS file

The result that was expected:
  • For the colors to be correct in all modern browsers

The result that occurs instead:
  • All browsers except IE9 display the correct color

Test Case:

See live test below


See this URL for live test case. Note that the panel header should be red, and the button should be blue:

You can download a zip file of the code from

Debugging already done:
  • none

Possible fix:
  • Make it a federal crime to use any version of Internet Explorer?

Additional CSS used:
  • custom css (as generated by the Compass compiler)

Operating System:
  • OS X 10.7.3
  • Windows 7