Question

I am rendering button in ASP.Net using the below HTML code

<table onclick=""
    title="Add New" 
    cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;
    float: left; cursor: pointer; ">
    <tbody>
        <tr>
            <td class="ButtonLeftStyle">
            </td>
            <td class="ButtonCenterStyle" >
                <span class="ButtonTextStyle">Add New</span>
            </td>
            <td class="ButtonRightStyle">
            </td>
        </tr>
    </tbody>
</table>

---

I am using below CSS classes to this button

.ButtonLeftStyle
{
    width: 1px;

}

.ButtonRightStyle
{
    width: 1px;

}

.ButtonCenterStyle
{

    background:url(Images/imgButton/GenericButton_Link.gif) repeat 0 -1px transparent;
    width: 120px;
    border: 1px solid #77A2B5;
    border-collapse: collapse;
    color: #000000;
    display: inline;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: hand;
    text-indent:25px;
    height: 18px;

}

TD.ButtonCenterStyle:hover
{
    background:url(Images/imgButton/GenericButton_Hover.gif) repeat 0 -1px transparent;   
    width: 120px; 
    border:1px solid #cccccc;
    border-collapse: collapse;
    color: #666666;
    display: block;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
    font-size: 11px;
    line-height: 13px;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: hand;
    text-indent:25px;
    height: 18px;
}

.ButtonTextStyle
{
    font-size: 10px;
    font-family: Tahoma,Arial,Verdana,Sans-Serif;
}

If we calculate the width of table then it must come 124px which coming correct in IE8, 9, and Firefox, but failing in Safari. Safari renders button with width = 46px which is equal to the text inside span.

How do I fix this problem?

Answer 1

Set

display: block;

in

.ButtonCenterStyle