FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS backgrounds in tables

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


dayveday
PLEASE HELP!! Shocked

I'm having heaps of trouble getting background images to work in CSS. Firefox is doing the background images the way I've intended, but IE is completely stuffing it up. I've got a really basic table with two rows. I want to put a background images behind each of the rows which run across the entire row (I'm using the sliding-doors technique to make it look good). The problem is that instead of applying the image to the rows, IE is making the image go to each cell.

This is how it should look (Firefox):

But this is how it does look (IE):


This is the code I've used. Can anyone please help at all?
Code:
                <table summary="Dates for Next Show" class="showdates">
                <thead><tr>
                    <td>Fri<br/>12th</td>
                    <td>Sat<br/>13th</td>
                    <td>Sun<br/>14th</td>
                    <td>Fri<br/>19th</td>
                    <td>Sat<br/>20th</td>
                </tr></thead>
                <tbody><tr>
                    <td>8pm</td>
                    <td>8pm</td>
                    <td>2pm</td>
                    <td>8pm</td>
                    <td>2pm<br/>8pm</td>
                </tr></tbody>
                </table>

table.showdates {
   border-collapse: collapse;
   border: 0pt none;
   border-spacing: 0;
}

table.showdates thead {
   background: #191f6b url('/images/sdates_topr.png') no-repeat top right;
   font-weight: bold;
   color: white;
}

table.showdates thead td {
   margin: 0;
   padding: 8px 12px 4px;
}

table.showdates thead tr {
   background: transparent url('/images/sdates_topl.png') no-repeat top left;
}

table.showdates tbody {
   background: #ddf url('/images/sdates_botr.png') no-repeat bottom right;
}

table.showdates tbody td {
   margin: 0;
   padding: 4px 12px 8px;
}

table.showdates tbody tr {
   background: transparent url('/images/sdates_botl.png') no-repeat bottom left;
}
The World is Yours
You might try using seperate classes for the 'tr' tag.
Aredon
IE has issues with backgrounds on TRs, TBODYs, THEADs and the like. So put your background on a TD instead.
Code:

table.showdates thead td{
   background: #191f6b url('/images/sdates_topr.png') no-repeat top right;
   font-weight: bold;
   color: white;
}

table.showdates tbody td {
   background: #ddf url('/images/sdates_botr.png') no-repeat bottom right;
}
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.