Using a background image on a table row
NOV
26
2006
How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:
tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }
As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.
The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.
Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.
Here's what he came up with:
td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }
This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.
Thank you very much just what i needed
Worked great in iPhone Safari 3.0! Ever in San Francisco --- I owe you a beer...make that a keg! Was pulling my last few hairs out! Had to adjust the % for non-uniform TD sizes and adjust padding for a curved border at each end, but you got me 95% the way there! Cheers!
Leave a comment:
Popular Posts
Search
Tags
actionmailer activerecord ajax apache apple barcamp caching capistrano centos code golf css db delete eager loading ebay email attachment erb flash ftp fun generators get haml helpers ie sucks javascript jquery lightbox lost merb net ftp paperclip passenger php plexus post presentation rails rails machine railsconf redesign rest rjs routes rss ruby ruby on rails safari script sinatra symfony text replacement tips tutorial twitter xhtml
Projects
© 2010 Travis Roberts. All rights reserved.
Jamie Fehr said on March 1, 2007:
also worth noting is that if you add <code>position: relative;</code> behind the image declaration your placed on your tr will show up in Internet Explorer. I am still looking for a Safari fix.