Tiling Backgrounds in Internet Explorer
With tables becoming less popular, this particular problem doesn't crop up nearly as often anymore but for when those data tables could use a little spice, it'd be nice sometimes to be able to set an image on the table row. The problem is that Internet Explorer 6 and 7 have this little problem: the background image specified in the TR gets displayed as if set for each TD. In other words, a background meant to span the entire TR would appear tiled.
Obviously that's not the effect you'd want. I was completely taken by surprise to find out that there is a way to trick IE into doing things "properly". The solution is fairly straightforward. Set the TR to
position:relative and set the TD to
With IE though, it's never that easy. I decided to play around with it to see what was possible and it turns out the technique stands up somewhat well under certain situations but falls flat in pretty much every other scenario.
First up, I tried using alpha PNGs with the usual filter hack in the TD to see if images could be overlayed on top of each other. Luckily, it worked! I could layer transparent PNGs over background images specified on the TR.
This alone probably solves the majority of design cases. However, I wanted to take it a step further.
Even though the table looked good generally speaking, I did begin to notice a specific oddity with cell spacing. In other browsers, the background image set on the row is only visible within the cell and not between cells. With this technique, that wasn't the case. The background on the table row in Internet Explorer would be visible from edge to edge. Not a deal breaker by any means but definitely something to consider.
The next test was to determine whether table groups like TBODY could receive the same treatment. In this case, the answer was a no. With the TR positioned relatively, you could get a background image on the TBODY to display in each TR but it tiled like the default behaviour between TR and TD. In other words, the problem managed to shift up.
Unfortunately, no amount of relative positioning seemed to unlock this mystery. In fact, setting a relative position on the TBODY made the background disappear altogether.
Thankfully, IE8's rendering engine has been written from scratch and the current beta does not exhibit this behaviour.
Feel free to check out the test page I put together, which demonstrates the alpha PNG over the background set in the table row.