Links: Image replacement methods

[ckirchho]

Hello,

are there any CSS methods for image replacement that work for epub files?

I tried something like:
a {
background: url(images/linkArrow.png) no-repeat left center;
display: block;
float: left;
height: 14px;
text-indent: -5000px;
width: 14px;
}

which lets the image appear and the text disappear, but unfortunately the link is not working anymore (in ADE). I guess Digital Editions (and maybe the Sony Reader, too) moves the "hot area" of that link together with the text outside of the screen.

I tried as well:
a {
background: url(images/linkArrow.png) no-repeat left center;
display: block;
float: left;
height: 14px;
overflow: hidden;
padding-top: 16px;
width: 14px;
}

Without "overflow: hidden;" the image appeared, but the text that is pushed down by the padding-top was visible as well. But with "overflow: hidden;" the arrow and the topmost part of the link text disappear and only the lower portion of the text are visible.

For now I will have to insert the images directly into the links and delete the text. For future versions of course I would like to do this with CSS, because the way the link text is still there, only invisible.

But is there a CSS method that works in ADE and Sony Reader?

Best regards,

Christian Kirchhoff

[shorshe]

Hi!

Did you happen to find a working solution?