View Full Version : Supporting IE with custom buttons

16 Mar 2012, 5:57 AM
I'm aware that IE is kind of blegh... So I can live with lack of rounded corners and such

but... with just big rounded corners on a custom button UI it pretty much started hiding the content of the button and adding MAJOR amounts of space O.O;

hell it doesn't even show the borders.

I tried the theme slicer but it apparently doesn't support custom button-ui's yet.
It just says it's done, but there's no difference =/

so any idea how I can define my buttons so that it looks all pretty and such in chrome/firefox (possibly the others even too I just didn't check yet)

and that it looks like 50% the same in IE (aka same colours/visibility/borders/distances almost the same)

So you kinda get what I'm talking about a little more I tried making a proper side by side example of my issue


also this is my white button css/sass/compass/whatever definition

@include extjs-button-ui(

$border-radius: 0px,
$border-width: 3px,

$border-color: black,
$border-color-over: black,
$border-color-focus: black,
$border-color-pressed: black,
$border-color-disabled: black,

$padding: 0px,
$text-padding: 0px,

$background-color: #fefefe,
$background-color-over: #d5e0d8,
$background-color-focus: #e6e7e6,
$background-color-pressed: #e6e7e6,
$background-color-disabled: #c6b2b3,

$background-gradient: $button-default-background-gradient,
$background-gradient-over: $button-default-background-gradient-over,
$background-gradient-focus: $button-default-background-gradient-focus,
$background-gradient-pressed: $button-default-background-gradient-pressed,
$background-gradient-disabled: $button-default-background-gradient-disabled,

$color: black,
$color-over: #e8e4e4,
$color-focus: #979797,
$color-pressed: #979797,
$color-disabled: #c6b2b3,

$font-size: 14,
$font-size-over: 17,
$font-size-focus: 17,
$font-size-pressed: 17,

$font-weight: 700,
$font-weight-over: 700,
$font-weight-focus: 700,
$font-weight-pressed: 700,
$font-weight-disabled: 700,

$font-family: $font-family,
$font-family-over: $font-family,
$font-family-focus: $font-family,
$font-family-pressed: $font-family,
//$font-family-disabled: $font-family,

$icon-size: $button-large-icon-size


the other buttons have similar definitions just different colors (obviously)
btw the current panel they're in serve as a sort of 'showcase' of what's there for the person who's supposed to put actual data in it.