Which Image Replacement method do you use? (not for fonts)

HTML & CSS
1

So before I started using images to replace text (not in the sIFR/cufon method for fonts, but rather when you want the element to be an image instead of its default text, such as a logo or a social icon), I researched many of the image replacement techniques:
http://css-discuss.incutio.com/wiki/Image_Replacement
http://www.mezzoblue.com/tests/revised-image-replacement/

others I can’t find now.

I’ve been using the -9999em solution up to now, but recognize that in a CSS on/Images OFF scenario, it will show absolutely nothing.

I’ve been using Web Archives to look up the Anatoly method, so maybe that will work.

I’ve been looking for a method that doesn’t require any extra HTML markup and no JS.

What method do you use?

2

This is the method I use:

http://www.pmob.co.uk/temp/headerreplacement2.htm (without link)
http://www.pmob.co.uk/temp/headerreplacement3.htm (with link)

Only drawback is that images can’t be transparent.

3

And the extra <span> that’s required :\

I was able to extract the Anatoli method and put it on snipplr: http://snipplr.com/view/45761/anatoli-method-for-image-replacement/

It works well, the only problem I’ve found with it is that you cannot use a sprite because it uses content: url() instead of background: url(), so you cannot use background-position

So side question, does anyone know an equivalent for background-position with content: instead?

4

The paranoia about ‘extra markup’ for things like image replacement is something I kick to the curb – funny since I’m rabidly anti-wasteful markup… but it really seems like people are putting their efforts in that regard in all the wrong places… repeatedly I see people going “I don’t want to use an extra span” when the pages they make have 20 or 30 pointless DIV, classes and ID’s, hundreds of K of javascript for nothing, multiple embedded fonts, IE conditional crap on a layout that shouldn’t need it, javascript doing CSS’ job, static scripting in the markup and all sorts of other nonsense. All things in their place people!

Adding an empty tag remains the most reliable of techniques which is why a gilder-levin-esque approaches are what I use. Oh noes, I might have to spend ten characters on a SPAN…

Usually bandwidth savings can be better found elsewhere… much like FIELDSET, LEGEND, or building content-first dynamic width column layouts suck it up and use the extra element!

So far as other methods go, ANY technique that doesn’t work when you turn images off…
COMPLETELY DEFEATS THE POINT OF USING IMAGE REPLACEMENT IN THE FIRST PLACE!
:kaioken: :kaioken: :kaioken: :kaioken: :kaioken: :kaioken: :kaioken:

Which is why the monstrous negative text-indent, font-size:1px or the display:none span are total garbage and a WASTE not only of code but also of your time and potentially the visitors. At that point you might as well just put a IMG tag in the markup! (and as someone who does browse from a android tablet with images turned off to save $$$ on my data plan)

I also tend to put the span AFTER the content

<h1>Site Title<span></span></h1>

Because I can use the same structure not just for image replacement, but for sliding doors, inline-block endcaps, and a whole host of other effects making future reskinning easier. Means you have to state the position in the CSS, but I’ll often do that anyways for other effects or making the image larger or smaller than the h1 element itself.

The only ‘problem’ with gilder-levin is that if you use gecko’s sweetly retarded crack addict “resize PX fonts but nothing else declared in PX” method of zooming (which THANKFULLY is no longer the default) your text could peek out from under the image… OH WELL… Anyone who cares about zooming or accessibility probably isn’t using Nyetscapes sweetly retarded cousins ANYWAYS since it’s a miserable /FAIL/ across the board at that anyhow. Oh noes, it breaks in a browser zoom mode that’s broken/useless on 99% of websites ANYWAYS – NOT THAT?!?

5

It’s not about bandwidth saving (and therefore not about hundreds of K of blah), it’s about using the extra non-semantic tag. I enjoy not having to use empty elements because they provide absolutely nothing to the meaning of the page and are only there for design hacks, which I have a problem with.

6

  1. If it’s empty, does the tags meaning actually, uhm, mean anything? (no content to apply meaning to == no meaning)

  2. SPAN and DIV’s semantic meanings are that they apply no extra meaning to their content. These elements pretty much EXIST to be hooks because of that. (otherwise why would we need them in the first place?)… now, using I and B I do get a bit squirrelly about, but then, well, see #1.

I don’t consider a element hook using the element pretty much FOR WHAT IT’S MEANT FOR to be a hack. Seriously, DIV and SPAN exist for the sole purpose of applying styling since apart from DIV being block-level, they do NOTHING.

Now sure, the five to ten years from now when we can actually deploy CSS3 in the wild without problems (as soon as Gecko and webkit actually support CSS3 and not their “for testing only” equivalents – be sad when Microsoft beats them to market on real world deployability) it will be great to use empty generated content elements to add the hooks as needed or things like border-image (one I’m really looking forward to) – but in the here and now it’s the best approach for sliding doors, gilder-levin, eight corners and a whole host of other techniques.

Especially when the alternatives have ZERO graceful degradation and are miserable failures at accessibility.

7

a div means a logical division of your content. The sidebar is a logical division from my main content. If my sidebar is made up of several different elements, it groups them together as a package of content.

My page header is logically divided from my nav bar, is logically divided from my central content, is logically divided from my footer.

In the future, it will be replaced by <section>, which provides mostly the same semantic meaning.

I cannot make that semantic justification for span tags, which is why I try as hard as I can to not use them.

8

From what I can gather, there are:
HTML purists (e.g. myself, who would rather have longer CSS and pure HTML and sacrifice older browser design methods)
CSS purists (who would rather mark up their HTML to achieve the same design and make it consistent among browsing platforms)
And minimalists (who would rather use as little HTML and CSS both as possible, even if it means sacrificing in design for all browsers)

Which are you?

9

An empty SPAN element in this instance although wasteful would be an appropriate usage since it is generic inline style or language container. As no attributes have been applied and isn’t wrapping data it is not really doing much and is pretty harmless.

10

overflow: hidden;

The latest versions have started to do that now.