CODEWITHSUNDEEP
cssinternet-explorer-9
Nick G
Nick G

Reputation: 1229

IE9 CSS on input button not working

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

Upvotes: 0

Views: 2144

Answers (1)

Spudley
Spudley

Reputation: 168655

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.

Upvotes: 1

Related Questions