Border is outside the button in IE but not in FF, Chrome, Safari
I have created menu with tabs and under tabs I use <button> s. Normally <button> has border:none; attribute. When a user hovers <button> the class below is added to it.
.hover {
border-style:solid
border-width:2px;
border-color:rgb(160,36,67);
};
Unhovered (on the right) <button> and hovered <button> can be seen here. (Sorry for the poor quality)
I get the first result firefox, safari and chrome. However in IE border appears outside the button and pushes the other elements in the page. I tried to use max-height max-width however result is the same.
I searched but could not find similar topic. Thanks for any help.
Edit: Added HTML
<table id="ust3tab" class="tab" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="td1"><button id="alt1" class="altbutton">TAB1</button></td>
<td class="td1"><button id="alt2" class="altbutton">TAB2</button></td>
<td class="td1"><button id="alt3" class="altbutton">TAB3</button></td>
<td class="td1"><button id="alt4" class="altbutton">TAB4</button></td>
<td class="td1"><button id="alt5" class="altbutton">TAB5</button></td>
</tr>
</tbody>
</table>
Try adding
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
to your td.
http://jsfiddle.net/F9aQw/
.altbutton:hover {
border:2px solid red;
};