IE doubles the button text

ie doubles the text on disabled buttons

[problemmaths]

I am using a class called disabled to style disabled buttons in ie (as it doesn't recognise disabled="disabled"
however for some reason it doubles the text on the disabled buttons. so it has the colour I have set but also the same text in white underneath and slightly off to the side - by one pixel or so.

I can't find this mentioned anywhere online and I can't see where the white text is coming from. I'm starting to go crazy from this so if anyone has any ideas it would be most appreciated

doctype is strict

css

/** Buttons**/
button {
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 background:#134859 url(../images/dark_button_bg.png) repeat-x scroll 0 0;
 border:medium none;
 color:#FFFFFF;
 padding:4px;
 cursor: pointer;
 margin: 2px;
 margin-left: 5px;
}
button[disabled="disabled"] {
 color: #4C5E63;
 background:#678087 url(/images/disabled_button_bg.png) repeat-x;
 border:solid 0px #FFF;
}
button.disabled{
 color: #4C5E63;
 background:#678087 url(/images/disabled_button_bg.png) repeat-x;
 border:solid 0px #FFF;
}

html

<div id="define_buttons">
<button onClick="publish_something(); return false;" {% if not can_publish %}class="disabled" disabled="disabled"{% endif %}>{% trans "Publish" %}
</button>
<button onClick="cancel_definition(); return false;">{% if key %}{% trans "Keep as a draft" %}{% else %}{% trans "Cancel" %}{% endif %}
</button>
</div>

[swa66]

What version of IE are we talking about ?

Also: the html: it would be easier to have the output of that script (whatever language it is in) than to have the script. Tip: do view source in the browser to get it.

[SuzyUK]

Hi problemmaths and Welcome to WebmasterWorld!

Your first question is a beauty ;)
That isn't two lots of text it's an IE system setting for usability. It's 'greying out' the text with an embossing effect added.. how it's done I don't know.. e.g. if you change your color on that button to black (#000) (on some sort of darkish background color, you'll see it, the black, doesn't take either, the text remains grey with the lighter embossing effect.

UI or System controls are very hard to style cross browser and the only reliable way I've seen to do this is by "baking in" the text to your background image. You are already using conditions to apply the class so this fix might work for you.

You build your background image for both states of the button (try to make sure the disabled state is still obvioulsy disabled though for accessibility reasons) with the text built into them, you can have more than 2 states and adjust you classname conditions accordingly

then remove the actual text from the button.. i.e.
<button {..your conditions}..></button>

or

<button {..your conditions}..><span>your text</span></button>

and hide the span text with {display: none;} so it's read and heard when CSS is off

you could also as a usability aid, add the text into the title attribute so the text is still there on hover

then if you've built the image as a sprite you just need to apply it to both button states, while changing the background image position according to the disabled class.

If you want you could also bake the text into the enabled state's image so the experience is the same for both and again hide the span text in it

alternatively, with your original images, if your "disabled image" is light enough perhaps the "shadow" won't be so noticeable

sample code to explain my thinking above:

<style type="text/css" media="screen">
button {
background: blue;
color: #000;
width: 80px;
height: 22px;
cursor: pointer;
}

button.disabled {
background: #dcdcdc;
cursor: normal;
}

button.disabled span {display:none;}
</style>

<button class="disabled" disabled title="this button is disabled"><span>your disabled text</span></button>
<button><span>your enabled text</span></button>

[problemmaths]

hi swa66: It's happening in all versions of ie

thanks so much suzy, I'm gonna give this a try. I'll let you know how it goes.

[wyweb]

Suzy you rock....