IE9 CSS on input button not working

Question

I am not sure how to word this but basically when in IE9, with standards and browser mode set to IE9, my button styles do not render correctly. When in IE10 compatibility or not they look good with IE9 standards and browser mode so testing in IE10 doesn't show this error. In chrome it works perfectly as well. Here is my button input code and the .css as well as a fiddle that shows the button rendering. I attached a screenshot of the button rendered in chrome (which is correct) so you can see what it should look like, i'm just not sure of a workaround for this and was hoping someone could help.

http://jsfiddle.net/LLHeD/

.button_standard,
.CommandButton,
.CommandButtonNoWidth,
.CommandButtonWorkflow,
.CommandButtonWorkflowNotify
{
    border-top: #F4E6CC 2px solid;
    border-right: #BFB087 2px solid;
    border-bottom: #ABA476 2px solid;
    border-left: #F5DFBA 2px solid;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    margin: 0;
    color: #666666;
    background-color: #F3D29D;
    text-decoartion: none;
    cursor:pointer; 
}

<input type="submit" name="ucDocSearchForm$btnSearch" value="Search" onclick="return validateDates();" id="ucDocSearchForm_btnSearch" class="CommandButtonNoWidth" name="btnSearch" onMouseOver="this.src='/applications/images/search_over_clink.gif'" onMouseOut="this.src='/applications/images/search_on_clink.gif'" style="font-weight:bold;width:65px" />

enter image description here

that's how it was written in the style sheet that i am working on, i didn't write it myself, but i will edit the post for you, thanks for the very informative comment — Nick G
– Nick G, Commented Sep 16, 2013 at 13:43

Spudley · Accepted Answer · 2013-09-16 14:02:45Z

1

Your problem appears to be the order of the declarations in the border styles.

CSS border (and border-left, etc) are specified as a concatenation of border-width, border-style, and border-color, in that order.

You've got them in a completely different order.

Theoretically, getting them in the wrong order can break things. In practice, I've not seen it actually happen very often; browsers are generally pretty good at working out what you mean in this case as the three values are easily distinguished (some other styles are more demanding in this respect, but border is generally less so).

However, discussions about theory and practice go out of the window here, because switching the values into the right order in your code makes it work as intended, so clearly that is the issue.

Here's the updated fiddle: http://jsfiddle.net/LLHeD/2/

Hope that helps.

answered Sep 16, 2013 at 14:02

Spudley

169k39 gold badges240 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick G Over a year ago

thank you very much for your help with this, i didn't even think of the declaration order and you're right that other browsers including versions of IE render this correctly, but IE9 Browser mode with IE9 standards just doesn't seem to want to make it work, odd

Collectives™ on Stack Overflow

IE9 CSS on input button not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related