Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 937
kenwarner Avatar asked Sep 05 '25 03:09

kenwarner


2 Answers

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)."

like image 81
Yash Avatar answered Sep 07 '25 22:09

Yash


Apply z-index:-1;

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

.right
{
    position:relative;
    z-index:-1
}
like image 26
Mr.T.K Avatar answered Sep 08 '25 00:09

Mr.T.K



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!