Too often are CSS coders developing down a narrow road, thinking only of what will get the job done. To them, cross-browser functionality comes as a chore after the intial coding is completed (and is rendering fine in Firefox 3/Safari). Clearly this should not be the case, defensive coding is a best practice not just in functional languages, but in CSS as well. This article, sent by a colleague of mine, is a great introduction to this practice in CSS to prevent the most common browser (and non-browser) related bugs. Check out the article here.
“Don’t fix, prevent.”
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.