Home/ Questions/Q 7184121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:08:07+00:00

In IE8 I get extra padding in for the td elements. Here is my

  • 0

In IE8 I get extra padding in for the td elements.

Here is my html

<html>
<head>
    <title>Test page</title>
</head>

<body>
 <div id="actionDiv" width="100%" align="center" style="display:none;"></div>
        <table class="background" width="100%">
            <tr width="100%">
                <td align="center"><div id="new"><input type="button" class="button" value="Button1" id="button1" readonly="readonly"/> </div></td>
                <td align="center"><div id="save"><input type="button" class="button" value="Button1" id="button2" readonly="readonly"/> </div></td>
                <td align="center"><div id="savenew"><input type="button" class="button" value="Button3" id="button3" readonly="readonly"/> </div></td>
                <td align="center"><div id="saveback"><input type="button" class="button" value="Button4" id="button4" readonly="readonly"/> </div></td>
                <td align="center"><div id="select"><input type="button" class="button" value="Button5" id="button5" readonly="readonly"/> </div></td>
                <td align="center"><div id="modify"><input type="button" class="button" value="Button6" id="button6" readonly="readonly"/></div></td>
                <td align="center"><div id="view"><input type="button" class="button" value="Button7" id="button7" readonly="readonly"/></div></td>
                <td align="center"><div id="copy"><input type="button" class="button" value="Button8" id="button8" readonly="readonly"/></div></td>
                <td align="center"><div id="delete"><input type="button" class="button" value="Button9" id="button9" readonly="readonly"/></div></td>
                <td align="center"><div id="report1"><input type="button" class="button" value="Report1" id="report1" readonly="readonly"/> </div></td>
                <td align="center"><div id=""><input type="button" class="button" value="report2" id="Report2"/></td>
                <td align="right" width="100%"><div id="back"><input type="button" class="button" value="Back" id="Button10" readonly="readonly"/> </div></td>
            </tr>
        </table>
</body>
</html>

and my css file 

.background {
    background-color: #e6e6e6;
    height: 1px;
}

input.button {
    background-color: #7B9978;
    text-decoration: none;
    font-family: Verdana, Arial, Tahoma;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff; /*width: 100px;*/
    overflow:visible;
    padding: 0px 2px;
    height: 18px;
    border-style: solid;
    border-width: 0px;
    border-color: #000000;
}

I have achieved to shorten the input elements not to fill the td element, however as

as you can see on the image

enter image description here

there is a significant padding between the buttons because of the td elements. How could I remove this padding (without using DOCTYPE) in IE8?

In FF it looks like this (this is how it should look like in IE8 too)

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This depends on different allocation of columns when conflicting requirements are imposed (the last cell has width=”100%”). To avoid this, change the div elements enclosing input elements to span elements and place them, except the first one, into the first cell of the row.

    • 0