Submit button has purple border around it in IE, but not in Chrome. How do I get rid of it in IE?

Question

My Submit button has purple border around it in IE, but not in Chrome. How do I get rid of it in IE?

Image: (Top one is in IE, Bottom one is in Chrome - I just cropped it into an image) http://i.imgur.com/Qb6pI.png

My code is:

HTML:

<div style="float:right; border:0px;">
    <input type="submit" class="submitorder"/>
</div>

CSS:

.submitorder {
background-image: url('https://www.amleo.com/images/art/SubmitOrderSprite.png');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-position: 0px -62px;
}

Answer 1

It looks like you're removing the border on the div, not on the input. Modify your CSS to the following:

.submitorder {
    background-image: url('https://www.amleo.com/images/art/SubmitOrderSprite.png');
    background-position: 0px 0px;
    width: 205px;
    height: 52px;
    font-size:0px;
    border: 0 none;
}

That should sort you out.

Answer 2

try the following code *border :none; / for ie7 /

_border:none; / for ie6 /

border:none \\0/IE9; / * ie9 specific not sure* /

Answer 3

i can't actually see the purple you are speaking of by it's a common problem with IE. You could get rid of it just by adding border:none to your CSS.

Answer 4

First off, inline styles are never good practice.

As for the border, try:

.submitorder {
border: none;
background-image: url('https://www.amleo.com/images/art/SubmitOrderSprite.png');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
}

Answer 5

Fore IE try adding outline: 0; & border:none

Answer 6

.submitorder {
background-image: url('https://www.amleo.com/images/art/SubmitOrderSprite.png');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
outline:none;
border:none;
}