Hi, my name is Al

Background Image on Table Rows Repeating

As per the conditions of my parole, I thought I’d write my quarterly Web-based blog post on something I found the other day. I was working on a tables(don’t cringe or vomit, they can be done properly and be used properly) and to make it look nice, there was a background image on the header. Working in Firefox for the majority of the time, I didn’t notice anything wrong with the table. The background image was on the table row so it would sit across the top of the table and I didn’t have a care in the world. I then loaded it up in IE7 and my eye started getting that twitch it gets when something isn’t rendering right, most developers will know what I’m talking about here.

The CSS I used was here:

table {
width:384px;border:1px solid #efefef;
}
th, td {
width:128px;
}
tr.headrow {
background:url(/images/southpark.gif) top left no-repeat;
}
tr.headrow th {
height:140px;
}
tr.light {
background-color:#eeeeee;
}
tr.dark {
background-color:#cdcdcd;
}

and the HTML for the table:

<tr class='headrow'><th>South</th><th>Park</th><th>Al</th></tr>
<tr class='light'><td>Light</td><td>Row</td><td>Here</td></tr>
<tr class='dark'><td>Dark</td><td>Row</td><td>Here</td></tr>


In IE7 it looks like this:

Pretty annoying eh? I thought so too. However, the fix is surprisingly simple.


table {
width:384px;border:1px solid #efefef;position:relative;
}
tr.headrow {
background:url(southpark.gif) top left no-repeat;position:relative;
}
tr.headrow th {
height:140px;background-image:none;
}


All I did was position the tr with background as relative, and remove the repeating image on the th. From what I gather, IE doesnt care about the TR and puts the background on the TH’s instead. I’m not entiiiirely sure how positioning the row relatively allows the background to be put on, but you just have to turn off the image on the TH’s afterwards it you won’t see the difference. I haven’t tested this in all browsers, so if anyone doesn’t see it working somewhere, feel free to let me know. Note, the extra position:relative on here is to sit it properly in my own blog, so it’s not really required.

Here is the coded table:

So there you go, may your designers go forth and round their corners. I swear one day I’ll be able to write a presentation on all the IE problems that can be solved by positioning things relatively.