CSS on submit buttons and IE 'feature'

Hello,

Anyone know how to get IE to stop drawing that fine 1px black line around the submit button?

I've been playing with style sheets to make my buttons look like graphics. So far I've got:

That works nicely on Firefox to draw the button with the little 'lighting from the top left' effect. And when they click it , it looks depressed. But in IE, when the button itself always has a very fine (1px?) black border drawn around it.

anyone know how to kill it?
[ December 16, 2004: Message edited by: Mike Curwen ]

Hmm... I'm seeing that it isn't always here. Here's a page that shows it off. As soon as you click one of the textboxes, the "CURSES" button will get a black box.

<html>
<head>
<title>CSS Buttons</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
/* ************** BUTTONS         ************ */
 
.action {
background: #006599;
border-bottom: 2px solid #104A7B;
border-right:  2px solid #104A7B;
border-left:   2px solid #AFC4D5;
border-top:    2px solid #AFC4D5;
color:#ffffff;
height:28px;
    font-family: Verdana, Trebuchet MS, sans-serif;
font-size: 14px; 
    font-weight: bold;
text-decoration:none;
cursor: hand;
}
.actiond {
background: #006599;
border-bottom: 2px solid #AFC4D5;
border-right:  2px solid #AFC4D5;
border-left:   2px solid #104A7B;
border-top:    2px solid #104A7B;
color:#ffffff;
height:28px;
    font-family: Verdana, Trebuchet MS, sans-serif;
font-size: 14px; 
    font-weight: bold;
text-decoration:none;
cursor: hand;
}
</style>
</head>
 
<body>
<form>
<input type="hidden" name="foo" value="bar" />
<table>
<tr>
   <td><p align="right">User Name:</p></td>
   <td><input type="text" name="username" size="20"></td>
</tr>
<tr> 
   <td><p align="right">Password:</p></td>
   <td><input type="password" name="password" size="20" /></td>
</tr>
<tr> 
   <td colspan="2" align="center">
      <input type="button" class="action" value="GOOD" 0nClick="this.className='actiond';" /><br />
      <br />
      <input type="submit" class="action" value="CURSES" 0nClick="this.className='actiond';" /><br />
   </td>
</tr>
</table>
</form>
</body>
</html>

[ December 16, 2004: Message edited by: Mike Curwen ]

The solution that people normally get is set the border to "0 none" but that will nt work in your case. hmmm

Only solution I can think of is surround the button with a div that has a border and set the border of the button to nothing. A lot of work for a little line!

I am going to take my hour drive home, I might think of it by the time I get home, most likely not.

Eric