IE puts a border around my submit button :(

I am using:
<input type="submit" name="submit" id="button" value="submit" />
CSS
#button {
border: 1px solid #009;
}

but for some reason IE puts an extra 1px black border around that one.
How can I stop this?

 

<input type="submit" name="submit" id="button" value="submit" />
CSS
#button {
border: 0px solid #009;
}

Try setting your border to 0....

 

That takes out both (obviously )
But I want to keep the other border

 

i'm also having this problem, its so weird. I am adding a button to a form and i need to style the button. i have the same code on both buttons, one has standard colors such as red and pink to define the border color, and the other has numeric colors like #158734... The one using regular colors such as red does not have a black border around it and the one using numeric does have a black border around it. anybody know about this?

 

Where is this button located?

 

I'm actually thinking this is an IE 9 thing... I've used IEtester to verify that. there are some small rendering issues like padding that changes too after page load... I think IE 9 still has some bugs.

 

<div class="left">
<input type="submit" name="vote" value="Like" class="input green" />
</div>
<div class="left form">
&nbsp;
</div>
<div class="left">
<input type="submit" name="skip" value="Skip" class="input red" />
</div>


.red {
border: 1px solid red; background-color: pink; color: maroon;
}
.red:hover {
border: 1px solid red; background-color: red; color: white;
}

.green {
border: 1px solid #9dc900;
background-color: #e1f0ab;
color: #526800;
}
.green:hover {
border: 1px solid #9dc900;
background-color: #9dc900;
color: white;
}

.left {
float: left;
}

.input {
width: 100px;
height: 30px;
padding: 5px;
margin: 5px;
}