IE 8 Table Spacing

Question

So I have a table on my site that displays fine on Chrome and FireFox but is apparently over-spaced on Internet explorer. In Chrome & FF, the table is spaced to it's minimal size (e.g. it only takes up as much space as it needs), using 141 pixels vertically. In IE, each row has an offset of 200px (from the inspector) causing the table to have a total height of 800px. I've looked around for an answer but nothing appears to have solved my problem, any ideas?

HTML

<table style="margin: 0 auto; display:table;" class="no-spacing" cellspacing="0" cellPadding="0">
        <tr>
            <td>Email</td>
            <td><input type="email" name="email" value="{{ old('email') }}"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr><td/>
            <td><input type="checkbox" name="remember"> Remember Me</td>
        </tr>
        <tr>
            <td/>
            <td><button type="submit" class="btn btn btn-primary" style="float:right;">Login</button></td>
        </tr>
</table>

CSS of table

element.style {
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheetinput:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}
user agent stylesheetinput:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}
user agent stylesheetinput {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button {
    margin: 0em;
    font: 13.3333px Arial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
Inherited from td
.productsTable th, td {
    text-align: left;
    min-height: 40px;
    min-height: 200px;
    margin: 5px;
}
Inherited from table.no-spacing
table {
    background-color: transparent;
    border-spacing: 0 5px;
    display: table-cell;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
user agent stylesheettable {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from body
body {
    font-family: "lato", sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
}
Inherited from html
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

webkit and Firefox have not needed the vendor prefixes for box-sizing in many years. border-box is no longer part of the spec. You're using 'display:table;' on a table? None of that will work in IE8 either. — Rob, Oct 26 '15 at 12:27
@Rob In fairness those are just various attempts to solve the problem that have not worked, do you have any ideas why it is stretching? — Atkrye, Oct 26 '15 at 12:36
As I said, none of the things you use will work in IE8 though there may be polyfills out there but I've not had to support IE8 in years so I can't be any help with that. — Rob, Oct 26 '15 at 13:00

score 0 · Answer 1 · edited May 23 '17 at 11:58

In your CSS:

.productsTable th, td {
    text-align: left;
    min-height: 40px;
    min-height: 200px;
    margin: 5px;
}

You're specifying ALL td must have a min-height of 200px.

Setting min-height in table cells is undefined as documented by W3C:

In CSS 2.1, the effect of min-height and max-height on tables, inline tables, table cells, table rows, and row groups is undefined.

Hence, browsers support is inconsistent on this particular property. In my opinion, Chrome and FF are correct by leaving the min-height as undefined and just ignoring it. IE8 is not honoring what W3C says about leaving it undefined.

You can read more about this issue on this other SO question: min-height and table cells

IE 8 Table Spacing

1 Answers1