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


Keywords:css 


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?


2 Answers: 

if you do not want to change the positioning, try

background-clip: padding-box;
 

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