anchor background images

Will they work when the text is not displayed?

[jfred1979]

I'm trying to turn off the text in anchor and just have it display a background image. I have the text inside the anchor wrapped in a <span> like this:

<a href="#"><span>Link</span></a>

It seems that the background displays fine until I use '

display: none

' on the <span>, then the background disappears with the text. Setting the padding, and the width and height of the anchor don't seem to work. Is what I'm trying to do impossible?

[garann]

Does it work if you add display:block; to the anchor?

[Rincewind]

You could use a transparent gif to create the effect rather than the text. For example this css.

.back {
background-image: url(background.gif);
}
.one {
display: inline;
height: 20px;
width: 150px;
}

And this html

<a href="#" class="back"><img src="transparent.gif" class="one" alt=" "></a>

[Reflection]

Your anchor must be set to display:block in order to define a width. Also try using visibility:hidden; rather than display:none;, by using visibility the element should still take up 'space'.

[jfred1979]

Thanks for the replies, I think I'm just going to have to go about this a different way. I was trying to remove the text and use the background images as buttons for CSS friendly browsers, and serve NN 4.x users an unstyled page so they would see the text that the style sheet would have removed. It looks like the only way to do this would be to make the anchors block elements, and since my navigation scheme is horizontal that wouldn't work too well. I'm seeing some other problems the more I look at it, I would have to specify the width of each individual anchor since all of the buttons are different sizes. Starts to defeat the purpose of using CSS......

[DrDoc]

Instead of display:none you can set the color to transparent...

[your_store]

Do a Google search for FIR (Fahrner Image Replacement) or css image replacement. Basically, it involves setting the anchor to overflow: hidden and moving the text down using top padding.

Added:
Ok, I found the bookmark I was looking for, which is a take off on the FIR mentioned above.

Better Image Replacement [kryogenix.org]

I'm using the above for the nav bars on my next site.

[garann]

jfred1979, I've gotten around wanting to replace the text with an image, but needing the anchor element to display inline by floating the links. If getting them to behave as though they're inline is your only problem, floating the anchor elements should be a decent workaround.