Question

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>

Answer 1

Try adding

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

to your td.