Why is min-height not working on my table in Safari and Firefox?

Question

The site works properly on Chrome and Edge, but is squished on Firefox and Safari.

Here is a working JSFiddle

Here is a picture showing comparison between top - Safari and bottom - Chrome. It is supposed to look like the bottom one. .

.spell span {
    position: relative;
    top: 25%;
}
.note {
    clear: both;
}
.spell {
    text-align: center;
    max-width: 100%;
    height: 35px;
    background-color: #E7E7E7;
}
.BUFF {
    background-color: #80DE57;
}
.NERF {
    background-color: #DE5B54;
}
.CHANGE {
    background-color: #D2A557;
}
.NEW {
    background-color: #50B9EB;
}
.BUGFIX {
    background-color: rgb(141, 141, 141);
}
.change_icon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    color: white;
    vertical-align: middle;
    text-align: center;
    min-width: 70px;
    height: 100%;
    display: table-cell;
}

<div class="note">
    <div class="spell"> <span class="spelliconwithtitle">text</span>

    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; ">test</p>
        <div class="change_icon BUFF">text</div>
    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; ">test</p>
        <div class="change_icon NERF">nerf</div>
    </div>
</div>

Possible duplicate http://stackoverflow.com/questions/5277161/why-is-min-height-not-working — Amit Horakeri, Sep 14 '15 at 15:15
@AmitHorakeri I've tried that it doesn't help adding height:100%; — Higeath, Sep 14 '15 at 15:18
@Aaron yes because it's a part of a bigger part of the website there are more buttons around that are arranged this way — Higeath, Sep 14 '15 at 15:23
@AmitHorakeri it's not a duplicate, the issue is specific to safari, Higeath wants to know why the height behaves differently in other browsers. — Armfoot, Sep 14 '15 at 15:26
Higeath, [Aaron's solution](http://stackoverflow.com/a/32568483/1326147) worked on both firefox and safari. — Armfoot, Sep 14 '15 at 15:36

Aaron · Accepted Answer · 2015-09-14T15:52:20.767

min-height doesn't work on tables.

You will have to replace it with height

.spell span {
    position: relative;
    top: 25%;
}
.note {
    clear: both;
}
.spell {
    text-align: center;
    max-width: 100%;
    height: 35px;
    background-color: #E7E7E7;
}
.BUFF {
    background-color: #80DE57;
}
.NERF {
    background-color: #DE5B54;
}
.CHANGE {
    background-color: #D2A557;
}
.NEW {
    background-color: #50B9EB;
}
.BUGFIX {
    background-color: rgb(141, 141, 141);
}
.change_icon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    color: white;
    vertical-align: middle;
    text-align: center;
    min-width: 70px;
    height: 100%;
    display: table-cell;
}

<div class="note">
    <div class="spell"> <span class="spelliconwithtitle">text</span>

    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell;height: 41px; ">test</p>
        <div class="change_icon BUFF">text</div>
    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; height: 41px;">test</p>
        <div class="change_icon NERF">nerf</div>
    </div>
</div>

well now it doesn't work properly on chrome should I keep both min-height: 41px; and height:41px; that seems to be working — Higeath, Sep 14 '15 at 15:50
Ive updated my answer, you will need to add the height to the `table-cell` element for chrome! — Aaron, Sep 14 '15 at 15:53

score 0 · Answer 2 · answered Sep 14 '15 at 15:26

For diversity:

Instead of height you can use line-height on the elements.

.spell span {
    position: relative;
    top: 25%;
}
.note {
    clear: both;
}
.spell {
    text-align: center;
    max-width: 100%;
    height: 35px;
    background-color: #E7E7E7;
}
.BUFF {
    background-color: #80DE57;
}
.NERF {
    background-color: #DE5B54;
}
.CHANGE {
    background-color: #D2A557;
}
.NEW {
    background-color: #50B9EB;
}
.BUGFIX {
    background-color: rgb(141, 141, 141);
}
.change_icon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    color: white;
    vertical-align: middle;
    text-align: center;
    min-width: 70px;
    height: 100%;
    display: table-cell;
}

<div class="note">
    <div class="spell"> <span class="spelliconwithtitle">text</span>

    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; line-height: 41px; ">test</p>
        <div class="change_icon BUFF">text</div>
    </div>
    <hr style="margin: 0; padding: 0;">
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; ">
        <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; line-height: 41px; ">test</p>
        <div class="change_icon NERF">nerf</div>
    </div>
</div>

Why is min-height not working on my table in Safari and Firefox?

2 Answers2