Question

I have a code for a table and I have three cells in it. I want each cell to have different background images. But the problem is, only the first cell is showing an image! Please help! My code:

I changed the #topbar td width!

Succesful code:

#topbar {
        width: 100%;
        color: transparent;
        font-size: 13px;
        border-spacing: 0px;
        white-space: nowrap;
    }
    #topbar td {
        width: 8.33333%;
        margin: 0px;
        padding: 0px;
    }
    #topbar td {
        height: 15px;
        margin: 0px;
        background-color: transparent;
        white-space: nowrap;
        cursor: pointer;
    }
    #topbar td:hover {
        background-color: transparent;
    }
    #topbar td.selected {
        font-weight: bold;
        color: #FFFFF;
    }
    #topbar td.empty {
        cursor: auto;
    }
    #topbar td.empty:hover {
        background-color: #2d2d2d;
    }
    #topbar td span {
        display: image;
    }

OLD CODE
In the header

#topbar {
    width: 100%;
    color: transparent;
    font-size: 13px;
    border-spacing: 0px;
    white-space: nowrap;
}
#topbar td {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#topbar td {
    height: 15px;
    margin: 0px;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}
#topbar td:hover {
    background-color: transparent;
}
#topbar td.selected {
    font-weight: bold;
    color: #FFFFF;
}
#topbar td.empty {
    cursor: auto;
}
#topbar td.empty:hover {
    background-color: #2d2d2d;
}
#topbar td span {
    display: image;
}

In the body:

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat">
    </tr>
</table>

Answer 1

The images are all displaying there are just all on top of each other so you can only see the first one.

Not sure how you want them to display but adding display:block; to #topbar td rule will stop them being on top of each other

EDIT: If you wish to show them on the same line you will need to specify a width value for each of the TD elements. The 100% value currently set is taking up the full screen so obscuring the view of the other TD elements

Example: http://jsfiddle.net/mZEWN/