Image Rollovers Inside Facebook Tab Page - css

Question

I'm trying to use a simple CSS-sprite for image-based rollovers inside a Facebook Tab page, and the background images are being stripped by Facebook. To be clear, this problem only occurs inside a Tab page, but not in the main application itself.
Facebook also appears to be extremely picky about when it strips background images - background images applied to anchor tags are removed, but background images applied to the list element containing the anchor remain intact.
For example, given the markup:
<li><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></li>
the following CSS will apply a background to the list element successfully:
li {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
but the same CSS applied to the child anchor tag is stripped out by Facebook:
li a {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
Is Facebook actually capable of supporting image-based rollovers inside a tab, and if so, how?

Answer 1

Discovered a solution of sorts through trial and error, though it involves invalidly stacked html and looks pretty nasty.
Modify the markup so a div is inside the anchor tag:
<div><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></div>
and apply the background image to the div instead of the anchor:
li a div {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
You can then apply the background offset like this:
li a:hover div { background-position: 0 -43px; }
It does work but I'd much rather a less-hacky solution if anyone can suggest something.