CODEWITHSUNDEEP
htmlcss
kenwarner
kenwarner

Reputation: 29120

td { position:relative; } overflows into the table border

http://jsfiddle.net/L83y3/

HTML

<table>
    <tr>
        <td>stuff</td>
        <td class="right">more stuff</td>
    </tr>
</table>

CSS

table
{
    border:10px solid green;
}
td
{
    padding:20px;
    background-color:gray;
}
.right
{
    position:relative;
}

has a solid uninterrupted green border for Chrome 13, Safari 5, IE7 but results in this for IE9, IE8, FF5, FF4, FF3.6

bug

How can I get a solid border all the way around, but still have position:relative in the right cell?

Upvotes: 29

Views: 15362

Answers (4)

Yash
Yash

Reputation: 2193

Background clipping just did the trick. Just apply "background-clip: padding-box;" on the th and it works.

according to the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip.

"No background is drawn below the border (background extends to the outside edge of the padding)."

Upvotes: 55

T. Christiansen
T. Christiansen

Reputation: 1038

Don't use position on table-cells.

Just wrap the cells content into a relative div:

<table>
    <tr>
        <td>stuff</td>
        <td class="right">
            <div style="position:relative;">more stuff</div>
        </td>
    </tr>
</table>

Upvotes: 2

mu is too short
mu is too short

Reputation: 434585

You can't reliably change the position of a table cell, some browsers (older Safari versions at least, the latest one seems to have fixed this problem) will force table cells (and rows) to position: static no matter what you say.

If you need to absolutely position something inside a table cell, you'll need to put a relatively positioned <div> (or other block element) inside the cell and then put everything else inside that:

<table>
    <tr>
        <td>stuff</td>
        <td><div class="right">more stuff</div></td>
    </tr>
</table>

And then tweak the CSS:

.right {
    position:relative;
    width: 100%;
    height: 100%;
}

And the obligatory live example: http://jsfiddle.net/ambiguous/KUshG/

I suspect that takes care of the problem you're seeing and does away with some problems that you haven't seen yet.

Upvotes: 12

Mr.T.K
Mr.T.K

Reputation: 2356

Apply z-index:-1;

jsfiddle: http://jsfiddle.net/thilakar/L83y3/1/

.right
{
    position:relative;
    z-index:-1
}

Upvotes: 15

Related Questions