CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Atticus
Atticus

Reputation: 1632

Remove IE8 extra padding from TD element

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

Upvotes: 0

Views: 1961

Answers (3)

user47900
user47900

Reputation: 647

This is how you can control

CSS

table {
    table-layout: fixed;
}

HTML you can change width and adjust based on your need.

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

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

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.

Upvotes: 1

patad
patad

Reputation: 9692

I don't have IE8 to test your code, but this usually does the trick for me:

table {
    border-collapse: collapse;
}

Also, TD will have padding as default style.

td, table, tr {
    padding:0;
}

Upvotes: 0

Related Questions