Forum Moderators: open
Newby here desperately pulling my hair out because of this problem that I keep reading conflicting solutions to.
The code on the site I'm working on desperately needed stripping down, because legislation means we have to make it accessible. This is my first attempt at trying to write reasonably clean (or any for that matter!) html and CSS, so its been an interesting challenge! In the long run, I want to redesign the site by getting rid of all the horrible nested layout tables, but in the meantime I have to work with what I've got.
My problem is that the original designer created tab corners as gifs, but I can't get them to display as background images. My first goal is to at least get the site to validate in 4.01 transitional, and then I'll strip further until I can validate in strict. W3C say that 'background' is not acceptible, so I'm trying to call the image in from an external stylesheet. All the other styles work fine, so I'm calling it in OK. I've tried putting the url in inverted commas, calling the property just 'background' instead of 'background-image' - you name it, I've tried it (well, more than likely not seeing as I'm a complete novice!) but I just can't get it to work. As soon as I remove the 'background' property from the html file and try and call it in externally, the tab disappears. The code is as follows:
td.leftrighttab {
width: 12px;
height: 25px;
background-image: url(../images/tab_left.gif);
}
<td class="leftrighttab" background="../images/tab_left.gif"> </td>
Some sites say that 'background-image' isn't supported by CSS in table data cells, others say it is, but I'd really like an alternative solution if possible. Any advice you can give me would be really appreciated.
A background image should work just fine in a table cell..
I think perhaps this CSS thread [webmasterworld.com] might hold one possible answer?
Suzy