Button layout discrepancy in IE and mozilla

Question

I have been testing an application that i developed in both mozilla and IE(7 and 8). Everything works except the button-layout in IE.

In IE :

In Mozilla :

So in mozilla, its working as expected, but breaks up in IE.

I am using the following piece of code to render the buttons :

<tr style="display:block;">
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn-red" style="height: 2.0em; width: 95px; font-size: 13px; cursor: pointer;" />
    </td>
    <td align="left">
    <a href="#" class="btn-gray" style="height: 1.1em;">Cancel</a>
    </td>
</tr>

EDIT :

CSS :

Red Button :

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    height: auto;
    margin: 10px 10px 10px 0;
    padding: 4px 30px 0.5em;
    text-align: center;
    text-decoration: none;
    width: auto;
}

Gray Button :

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    border: 2px solid #B2B8B1;
    color: #000000;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    padding: 4px 30px;
    text-align: center;
    text-decoration: none;
    width: 40px;
}

Can any one suggest a way to make it work properly in IE ?

Answer 1

Ok, check this one out. http://jsfiddle.net/9QEGU/4/

I kinda cleaned up the code, added a .btn class to both your buttons to unify the styling a bit and mostly, I removed the second cell from your table which was unecessary. Basically your table was streching out in IE causing the button holders (td) to be 50% of the width, causing the big gap. Generally speaking, I think you should consider avoding table as a holder for buttons at all but that's not related to this issue. Still, simple div would do the trick!

Anyway, here it is. Should you have more questions, feel free to ask :)

<table>
<tr>
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn btn-red" />
        <a href="#" class="btn btn-gray">Cancel</a>
    </td>
</tr>
</table>

.btn {
    font-weight: bold;
    font-size: 13px;
    height: 30px;
    width:100px;
    margin: 10px 10px 10px 0;
    text-align: center;
    float:left;
    display:block;
}

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
}

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    color: #000000;
    text-decoration: none;
    line-height:30px;
}