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?

Psychologize

Unfortunately we can't reproduce this unless you give us more code. "Why isn't my code working" questions require at least enough code to reproduce the problem. – Kevel

Without code its a bit hard to help, what happens when you add border-style: inset; to your table css? – Oboe

Answer 1

if you do not want to change the positioning, try

background-clip: padding-box;

Ferule

Answer 2

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 :)

Psychologize

Excellent. solved my issue – Equidistant