Question

I am working on a page right now containing two buttons. The buttons are a combination of a span, with the button title, surrounded by images of two half circles:

<td align="right">
<a href="#" title="Reset" onclick="resetForm();">
        <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;">
         Reset
         </span><img src="images/btnBlueR.gif">
    </a>

     <a href="#" title="Clear all fields" onclick="clearForm()">
         <img src="images/btnBlueL.gif"><span style="background-image:url('images/btnBlueM.gif');color:white;font-weight:bold;height:22px;vertical-align:top;text-align:center;padding-top:5px;text-decoration:none;cursor:pointer;display:inline-block;">
          Clear
         </span><img src="images/btnBlueR.gif">
      </a>

When I hover over a button, a very small red line appears to the bottom right of the button. This is in all browsers. It looks like it is partially highlighting the “a” element, but only for a few pixels. Has anyone seen anything like this? How did you get it to go away?

http://jsfiddle.net/jmlane/VHFwB/

Answer 1

Make sure that the Link has no CSS applied:

a{
    text-decoration:none;
}
a img{
    border:0;
}