Confused on which css image replacement method to use for horizontal nav?

[4SeeN]

Hello,

I usually never do image replacements, but it has been awhile since I have developed a website. I starting to get back into the swing of things but was wondering if anyone can help me understand which method would be more beneficial for a horizontal nav bar with the links in an unordered list.

1. Technique #1
- http://www.sitepoint.com/new-css-ima...ent-technique/

2. Technique #2
- http://nicolasgallagher.com/css-imag...eudo-elements/

I have read multiple articles but people choose one over the other for different reasons and even the same reasons, so I really am quite confused on what I should utilize.

The Nav Images are transparent. Using Method #1, the text appears behind the image, and using technique 2 doesn't seem to work for me at all as the text appears to the right of the image. I am applying the class to the <a> tag.

Thank you in advance

Edit:
Technique 1 works if I make the if I apply a display:block to the class I assign to the <a> tag .

[ralph.m]

Technique 1 is not so good, because it fails if images are off. But method two looks OK. I'd go for the Gilder/Levin method unless you need transparent images, though. Avoiding this method because of an extra span is purity gone too far, IMHO.

[4SeeN]

Hi Ralph,

Thank you for taking the time to reply. At the risk of thinking I am over complicating things, I was wondering if you could clarify one more thing for me.

When doing a horizontal nav, should I even go through the trouble of replacing the text with am image using the above or similar methods? Meaning, is this purely for a SEO or accessibility concern? Should I just use images and place the tag in the title or alt tags? I know this may be personal preference, but I am starting to wonder if I have the wrong idea on when I should actually utilize this lol. It looks like everyone just uses it for things like logos and headers, and not links like I am attempting to do.

Thank you again in advance!

[ralph.m]

Should I just use images and place the tag in the title or alt tags?

Image replacement is often used for menus, so certainly don't let that stop you. But the problem with using alt attributes as a fallback is that some browsers (Safari, ?Chrome) don't display them if the image fails.

My preferred method is the Gilder/Leven replacement, demonstrated here:

http://www.pmob.co.uk/temp/headerreplacement3.htm

[4SeeN]

Awesome, that clarifies a lot and thank you for the link. Doesn't seem like that method will work well with transparent images though, but I will continue looking around to see how everyone else is doing it.

[ralph.m]

Awesome, that clarifies a lot and thank you for the link. Doesn't seem like that method will work well with transparent images though, but I will continue looking around to see how everyone else is doing it.

The second link you posted looks pretty good, especially as it seems to account for transparent images (though I can't quite work out how just yet!). I'd not seen that one before, so would be interested in what other CSS experts think of it, such as @Paul O'B ("other" than the author, that is!).

[Paul O'B]

The second link you posted looks pretty good, especially as it seems to account for transparent images (though I can't quite work out how just yet!). I'd not seen that one before, so would be interested in what other CSS experts think of it, such as @Paul O'B ("other" than the author, that is!).

It's very similar to the CSS quiz we had a few years ago where an image was used in the html to push the text out of the way. The image can be supplied via the content property for modern browsers as mentioned in the quiz and saves any extra mark up. If the image is missing then the text just slides back into view.

It's a good technique and will work with transparent images. A few years ago it wasn't worth the extra effort as support was limited but these days it is probably a worthwhile alternative.

Edit:


I didn't mention the downside in that you get the broken image icon in chrome and webkit should the image be missing. I've put up a demo here which solves that problem although the image has to be doctored to make it work.