Custom Button Greyed Out in IE7

Custom Button Greyed Out in IE7

  
Hi Community,

I have a button with custom CSS to change it's look to a blue picture.
In IE7 this button does not show a proper greyed out picture when it is disabled.
In IE8/9, FireFox it works just fine.
The standard style "Button" does also grey out as expected in IE7 when disabled.

The custom CSS :
.Button_Blue {
    width: 84px;
    height: 28px;
    text-align: center;
    background: url("/BeBopFOScreen/img/Button_Blue.png") transparent;
    color: white;
    cursor: pointer;
    border: none;
    margin: auto;
}
The standard CSS for the button widget is:
.Button {
    text-align: center;
    margin-right: 3px;
    padding: 3px 6px;
 }

.Button[disabled='disabled'] {
    color: ButtonShadow;
    cursor: text;
}
When I copy the standard Button CSS to my custom Button_Blue CSS it also works.
When I add some background and text color attributes to the CSS, it does not work anymore in IE7.
It also doesn't help to add the .Button_Blue[disabled='disabled'] or .Button_Blue[disabled=true] CSS.

Does anybody has seen this behavior before, and knows how to get a custom button widget greyed out in IE7?

Regards,
Joost van der Schoot


Hi Joost,

Have you tried adding this to your CSS:
.Button_Blue[disabled='disabled'] {
    background:none;
    color: ButtonShadow;
    cursor: text;
}

Cheers,
Tiago Simões
Hi Tiago,

I have tried that indeed. And also all kind of variations on that.
I noticed that if I copy the default button styles like shown below, it works.
.Button_Blue {
    text-align: center;
    margin-right: 3px;
    padding: 3px 6px;
 }

.Button_Blue[disabled='disabled'] {
    color: ButtonShadow;
    cursor: text;
}

Although it is even not necessary to add the ".Button_Blue[disabled='disabled']", it still works as default.

But I need to change the style, and when I change anything in these styles, it doesn't work anymore.
So the following example even doesn't do the trick, where I don't use an image url, but just simple background color:

.Button_Blue {
    text-align: center;
    margin-right: 3px;
    padding: 3px 6px;
    background: blue;
 }

.Button_Blue[disabled='disabled'] {
    color: ButtonShadow;
    background: none;
    cursor: text;
}
Cheers,
Joost van der Schoot
Hi Joost,

It seems IE7 does not understand those disabled selectors.
A workaround is to create a new CSS class use an extended property to set it:


Hi Tiago,

This workaround works for me. Thanks a lot for your feedback.

Best Regards,
Joost van der Schoot