Colgroup background image problem in Firefox

Hi everybody, I'm having a little problem using the 'colgroup' and 'col' tags in Firefox. I have a table that I wanted to add background images to, with the first three columns using one image, and the final column using a different image.
In IE7, the images work the way I hoped they would, with each cell having a copy of the image, but in Firefox, the image only displays once in the first and second rows (because it's bigger than one row), and that's it.

Here's some of the code I use:

.tablebox {
float: left;
width: 800px;
margin-top: 15px;
}
table {
border-collapse: collapse;
border-top: 2px solid #000055;
border-right: 2px solid #000055;
}

.tablelayout col#images {
background: #FFCEDD;
width: 145px;
}
.tablelayout col#make, .tablelayout col#voltage {
background: #FFCEDD url(images/tables/background2.gif) no-repeat left top;
width: 150px;
}
.tablelayout col#details {
background: #FFCEDD url(images/tables/background2.gif) no-repeat left top;
width: 255px;
}
.tablelayout col#cost {
background: #D2E3FF url(images/tables/background4.gif) no-repeat left top;
width: 100px;
}
.tablelayout td, .tablelayout th {
border: 1px solid #000055;
}
.tablelayout th.th1, .tablelayout th.th2, .tablelayout th.th3, .tablelayout th.th4 {
background: #FFCEDD url(images/tables/background3.gif) no-repeat left top;
text-align: center;
height: 25px;
border-left: 2px solid #000055;
border-bottom: 2px solid #000055;
color:#FFF;
}
.tablelayout th.th4 {
background: #D2E3FF url(images/tables/background1.gif) no-repeat left top;
}

<table class="tablelayout">
<colgroup>
<col id="images" />
<col id="make" />
<col id="voltage" />
<col id="details" />
<col id="cost" />
</colgroup>
<tr>
<th scope="col" class="th1">Image</th>
<th scope="col" class="th2">Make and Model</th>
<th scope="col" class="th2">Voltage and Wattage</th>
<th scope="col" class="th3">Details</th>
<th scope="col" class="th4">Cost</th>
</tr>

<tr>
<td class="image"><img src="images/503x145.jpg" /></td>
<td>
Product Name<br />
Subtitle
</td>
<td>General description</td>
</tr>

etc.

I presume that IE7 is in the wrong here, but maybe Firefox is the one with the bug.

I copied this technique from the excellent book 'CSS the Missing Manual', but it didn't explain much about the 'col' and 'colgroup' tags in CSS, only that the <col> style can only affect the cell colour , background image and cell width.

If it isn't possible to make this work, then I'll just do what I was going to in the first place (before I found out about colgroup), which is add a class to each <td> tag, depending on which background image I want to use.

Many thanks in advance for any help anybody can give, I did a Google search for any instances of this problem, but couldn't find anything.

Colgroup background image problem in Firefox

Image repeats correctly in IE7, not in Firefox

SissyandAda

SissyandAda

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week