CODEWITHSUNDEEP
htmlcsshtml-table
user947668
user947668

Reputation: 2718

Relative div overlaps parent table cell

I have a problem with div which placed inside of table cell. Cell has fixed height and div positioned relative with height:100%.

jsfiddle example

td {
    height:80px;
    width: 80px;
}
.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position:relative;
}

enter image description here

The problem appears when i change div's content and div height becomes greater than cell height. Behavior for IE and FF is below:

enter image description here

And the following picture illustrates Chrome's behavior:

enter image description here

Chrome's behavior is exactly what I need, how can I make it work same way in IE and Firefox?

Upvotes: 2

Views: 2426

Answers (2)

kapa
kapa

Reputation: 78671

I removed unnecessary markup and CSS, and now it seems to work fine.

position: relative did not really make much sense, and the border-fix div seemed to be unnecessary - and also caused the problem. Tables (and elements having display: table-cell and the likes) are quite flexible when it comes to height - simple block elements may not be, like in this case.

There was a lot of redundant CSS also, please see the Fiddle. Tested in Chrome, FF, IE9.

So this would be the markup:

<td class="border">
    <div class="cell_wrapper">
        <div class="cell_text">
            line-1
        </div>
    </div>
</td>

And the relevant CSS:

#mytable td {
    height:80px;
    width: 80px;
    text-align: center;
}

.cell_wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

Upvotes: 2

Randy Hunt
Randy Hunt

Reputation: 425

Firefox offers some possibilities for controlling cell behaviors, but if you have to support IE7, you're out of luck. display: table-cell; doesn't work in IE7 or earlier.

Upvotes: -1

Related Questions