CSS Background-color overlapses with border on table cell in IE

Question

I have a table with two simple table cells:

<table>
  <tr>
    <td>Test1</td>
  </tr>
  <tr>
    <td>Test2</td>
  </tr>
</table>

And I add the following CSS to the table cells:

td {
  border: 1px solid #000;
  background-color: #CCC;
}

For some reason when I view this in IE it shows the background on TOP of the border, if I uncheck the background in DOM explorer I can see the border is there.

I guess this has something to do with a parent element, but there are soooo many parent elements I can't paste all that code here.

Anyone has an idea what this might be?

Answer 1

As I expected, it was due to a position rule in CSS:

td {
    position: relative
}

No idea why this is, but removing that solved it.

Took me forever to narrow down tho, which is why i started this post in the first place, to save me time. but alright fixed now :)

Answer 2

if you do not want to change the positioning, try

background-clip: padding-box;