I am using styled buttons which look really good, my problem is that
the 1st button on the page has an ugly black square arround it. I
think this might indicate the default button when enter is pressed.
How can I remove this square.
HTML
<input type="submit" name="btnShowCurrent" value="Show Current"
id="btnShowCurrent" class="btn" onMouseover="btnHov(this, 'btn
btnHov'); return;" onMouseout="btnHov(this, 'btn'); return;"
onfocus="blur()" />
<input type="submit" name="btnShowAll" value="Show All"
id="btnShowAll" class="btn" onMouseover="btnHov(this, 'btn btnHov');
return;" onMouseout="btnHov(this, 'btn'); return;" onfocus="blur()" />
JavaScript
function btnHov( loc,cls)
{
if(loc.className)
loc.className=cls;
}
CSS
..btn
{
color: #000000;
background-color: #ccccff;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: 700;
width: 75px;
text-decoration: none;
padding: 0 3px 0 10px;
background-image: url(/MT/img/RedArrowRight.png);
background-repeat: no-repeat;
border: solid 1px; /* #cccccc */
border-color: #eeeeee #666666 #666666 #eeeeee;
}
..btn:hover, .btnHov
{
border: solid 1px #000000;
background-color: #FF7200;
}