Question

Please don’t suggest I stop using <input type="submit"> I need to support non javascript-enabled users.

I have a submit button, and on :hover I apply a border to it. However I have noticed that in Firefox 15 and IE7 the border gets applied to the inside of the element. This appears to be because I have set a fixed width and a height to the element and behaves normally once I remove them. However due to browser inconsistencies I need the width and height to ensure the submit button is the same size in all browsers.

Does anyone know how to prevent the border from being drawn inside the element?

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;
}

Relevant HTML:

<input type="submit" value="" class="submit btn" />

Answer 1

Wonder if there is a box-sizing property being applied to this input. box-sizing: border-box would cause border & padding to occur within width and height. I wonder if you’re using a CSS template that uses the * { box-sizing: border-box; } technique. Try

#searchform .submit { box-sizing: content-box; }