I am currently facing an issue with implementing CSS-sprite for image-based rollovers within a Facebook Tab page. Strangely, the background images are getting removed by Facebook only when inside a Tab page and not in the main application itself.
It seems that Facebook is quite selective in stripping background images - backgrounds applied to anchor tags get removed, but those applied to the list element containing the anchor remain unaffected.
For instance, if we have the following markup:
<li><a href="http://some/destination.html" target="_top"><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></a></li>
The CSS below successfully applies a background to the list element:
li {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
However, applying the same CSS to the child anchor tag results in Facebook removing it:
li a {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
I wonder if Facebook actually supports image-based rollovers within a tab, and if so, how can it be achieved?