Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the element. Is there a way to fix this issue without removing the width and height attributes?
Here is the relevant CSS:
#searchform .submit {
vertical-align: middle;
float: right;
height: 31px;
width: 31px;
position: relative;
left: -4px;
margin-right: -4px;
background-image: url(library/images/search-icon.png);
background-position: center center;
background-repeat: no-repeat;
background-color: #ffffff;
border: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
#searchform .submit:hover {
margin: -2px -6px 0px 0px;
border: 2px solid #000;
}
And here is the relevant HTML:
<input type="submit" value="" class="submit btn" />