9Mar/091
Safari: Table cells inheriting row backgrounds
I had the pleasure just now of working with tables (shudder), backgrounds, and Safari v3.2.1. In an attempt to acheive rounded corners on the top left and right of the table, I placed a CSS background property on <tr class="head">. Safari apparently likes to make the child cells (<td>'s) of said row inherit the background image as well, because hey, sharing is caring. As it turns out, THAT'S NOT WHAT I WANT, SAFARI. Even Internet Explorer, the bane of many web developer's existances, has a workable hack. Safari does not.
So, my remedy? After sitting and stewing in anger, I followed this advice and gave in. I took the background property off of the table row and put it on its parent, the table itself. Problem solved averted.
November 2nd, 2010 - 09:20
By default, the TR and TD have display properties table-cell and table-row. We need them to forget about it and feel like simple block elements:
tr {display: block;}
td {display: inline-block; background: transparent;}
This code solved the problem of rendering for me.