Background images and tables

In developing a new version of our website (our personal site), I encountered an odd bug that seems to affect IE6, IE7, Safari 3 (beta, windows) and Konqueror 3.5.6. Opera 9 and Firefox 2 at least are unaffected by the issue.

The issue comes from having a semantically marked up table in which a tbody is given a background image (with CSS naturally). The idea is to create a table that looks like the image below (screenshot from Firefox).

To achieve this, the following styles are applied:

.pedigree {
	empty-cells: show;
}

.pedigree td {
	border-bottom: 2px solid #4a4a4a;
    border-left: 2px solid #4a4a4a;
    padding: 3px;
    font-weight: bold;
}

.pedigree td span {
	font-weight: normal;
}

tbody.sire {
	background: #cbcbcb url('images/pedigree-topright.png') no-repeat right top;
}

.pedigree .fmRight {
	padding-right: 10px;
}

.pedigree .fmS {
	border-left: none;
	background: url('images/pedigree-topleft.png') no-repeat left top;
	padding-left: 10px;
}

.pedigree .fmS, .pedigree .fmSS {
	padding-top: 10px;
}

.pedigree .fmSSS {
	padding-top: 20px;
	padding-right: 20px;
}
/* Similar styling continues for the lower half as well */

When I began testing the layout with IE is was surprised when the end result was:

What really threw me off was that the same was visible in Safari 3 (Windows, beta) and Konqueror. Because the bug wasn’t limited to IE, I went and rechecked the CSS spec to see what it says about background and inheritance.

When it comes to inheritance, backgrounds are never inherited and the default values are none for the background image and transparent for the color. So, based on how I read the spec, Firefox and Opera get this right and the others are wrong.

To fix this, IE6/7 were easy as I simply used a conditional stylesheet to turn off all background images (and add some borders). Finding a workaround for Safari or Konqueror has left me stumped however.

No combination selectors to specifically set the background image of individual cells as none worked.

I’ve tried searching for this problem, but either I can’t come up with the correct combination of terms or I’m the first one to notice it.

I’ll put up a link to live versions of this table once our site is finalized and live, until then you’ll just have to imagine the table markup (or ask me for it).