Picking up coding not so long ago I encounter the most weird problems. Most of them turn out to be my own fault. But now I've bumped in to one I can't figure out. In FF it looks fine but in Safari the image I want instead of the text in my horizontal navigation bar becomes completely invisible. In fact the whole link is gone.

3 answers

Safari is probably ignoring the height and width that you manually specified because the element is set to display:inline. You might be able to work around this by setting the <li> elements to float:left and setting the links inside of them to display:block.

Adding text inside the link will also work, as you've found, but setting the color to transparent might not be the best option, because then it will look really funny if anyone visits your site with an old version of Internet Explorer that doesn't support transparent text. If you're going to go with text inside the link, I'd opt for a space (&nbsp;) instead.

[Edit:]
Actually, if you want to use an image as a link on your page, the best practice is to put it into the html with an <img /> tag, rather than inserting it as a background with CSS. For text-only browsers (and maybe screen-readers for the visually impaired), a CSS-only image will just be an empty link with no clues about its purpose, while an image in the html with a descriptive alt text will be a usable link for everyone.

I finally found a work around. Seems Safari needs some content in the link tag to show at all. So I entered one character and defined color:transparent in the CSS. I also tried negative text-indent, but that didn't have any effect either.