"Look, Man, no IMG tags"

[CosmicCatalyst]

**Update**

I found my mistake, and it was an utterly simple task that I had overlooked, which always seems to be at the root of most problems.

Thanks to those who actually felt like reading this post

Laters.

****


Has anyone ever used this "Look, Ma, no IMG tags" technique? I am having trouble getting it to work properly.

For those of you unfamiliar with it, goto www.zeldman.com. The top banner has no IMG tags, but rather relies on the "background" property for CSS to include the image in the webpage.

I just can't seem to get it to work properly, any insight would be valuable.

Thank you.

[mmj]

Has anyone ever used this "Look, Ma, no IMG tags" technique?

Yes. I use it on two of my sites, and have done for over 2 years now. However, I only do this where it makes sense to define the image as a background image. I wouldn't do this with an image that's used as an illustration, or a logo, or an image with text in it, for example. Only for images used as decoration.

The example you gave from Zeldman's personal site should be done with a background image. That should not have been done using an <img> tag, because the purpose of the image is to be a decoration in the background. However, the picture below it should be an <img>, because it provides content and not just background decoration.

[Ian Glass]

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

~~Ian

[mmj]

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

~~Ian

In the example CosmicCatalyst posted:

1) What do you mean by this?
2) The image was a non-essential image. If the browser doesn't support CSS, the image won't show, just like the background colours, borders and fonts won't show.
3) Which useless markup?
4) What are you referring to?

Sorry, I don't really understand what you're referring to. I thought CosmicCatalyst was referring to the background image at the top of Zeldman's site, behind the text "Zeldman.com. Web design news and entertainment since 1995. ISSN #1534-0309.". Did you have a look at the HTML? It's actually quite clever.

[CosmicCatalyst]

I'm not a big fan of this technique, personally: (1) it requires you to change your CSS for each new link, (2) it only works in CSS capable browsers, (3) it requires useless markup, and, here's the big one for me, (4) it's redundant to both the <img> and <object> tags. XHTML already has the semantics for this. :-)

In Zeldman.com's case, it is an easy way to do the IMG rollover effect. For non-CSS capable browsers (if you are still using IE4/NN4, get with the program!), there is linked text that displays in the IMG's place:

<span class="alt">Zeldman.com. Web design news and entertainment since 1995. ISSN #1534-0309.</span>

This class "alt" is set to {display: none}, so it only shows up in non-capable browsers, pretty nifty.

In my case however, I am using this No IMG technique for the Style Switcher, which loads alternate stylesheets. I have Color Scheme One and Color Scheme Two, in which each require a different IMG, so putting the IMG in via CSS gives me an easy way for offering two different site styles for my visitors.

Thanks a lot for the suggestions and comments, this is indeed the best web dev hangout on the net, period.

Cosmic

[Ian Glass]

Yeah, I see my first post may be a little too short.

First off, whenever I see a <div> or a <span> my ears perk up. They're the most over- & wrongly used markup by people trying to do "the right thing;" since they don't particularly affect the design, people think they don't mean anything (admittedly, they don't mean much, but they're still over used since more appropriate tags usually do exist or they're just there to achieve an effect). In my view, it's just as bad as misusing tables--it's the same motive, in fact.

So, applying this to Zeldman's site, we first have to establish what he was trying to say. I'll take on the logo banner first:

<div id="newmenu">
  <div id="bannerlogoban">
    <a id="logoban" href="/"  tabindex="1"
    title="Zeldman.com. Web design news and entertainment since 1995.">
      <span class="alt">Zeldman.com. Web design news and entertainment
      since 1995. ISSN #1534-0309.</span>
    </a>
  </div>
</div>

The first #newmenu is completely useless & redundant to it's child, and the second <div> should be marked up as a paragraph or headline since those're more accurate (or it could be included in the #secondarynav list right beneath it--probably the most preferable solution, actually).

On the actual effect, the title of the anchor is redundant to its content. Inside the anchor, the <span> is only there to accomplish the effect--it serves no actual structural purpose--and it's just imitating the behavior of at least two existing elements (quite knowingly too, or it's unlikely that he'd have used the same abbreviation: "alt"). On top of this, the "alt text" is the exact same text as on the image, which for the most part is just text without "special treatment"--easily done with CSS.

If it is really that important to not have protruding strokes on the Ms in "zeldman.com" (& I don't think it is, but that's just me) then that text should be an image (with the appropriate alt text) and the "eye" could either be on the same logo image or put in the background somewhere. There is absolutely no reason for the "Web design news ... ISSN #1534-0309." portion to not be plain text, however. As text, "zeldman.com" should probably be marked up as <em>, <strong> or a handful of the other phrase elements--even <span id="logo">.

Moving onto the ALA/Happy Cog/WThRemix buttons, they face the same problems as the masthead, but text wouldn't work there so there's no problem with using images. For both the masthead and the buttons, he uses CSS :hover to load an alternative image, but onmouseover/onmouseout are both legal in XHTML & probably just as appropriate. Or, he could stick with :hover and use PNGs with transparency; just change the background color instead of the entire image saving all of us a couple of d/ls.

OK, so that's just semantics, this technique also has practical implications, too. If someone has images turned off (like I did while surfing @ 12k last month ), the CSS is still downloaded, which means that neither the alt text nor the image that replaces it will show up. If someone has visited your site and then you add a button, it probably won't show up either (and neither will the alt text) since the browser can cache the CSS. And there are also the normal issues with using images beyond that, too.

The big problem with all that isn't that it not clever, but that it's too clever--trying to rewrite what already exists. I'd have preferred something more along the lines of:

<a href="/"><object data="/i/2003/parts/lb2.gif" type="image/gif">
  <em>Zeldman.com</em> Web design news and entertainment since 1995.
  ISSN #1534-0309.
</object></a>

<!-- or -->

<a href="/"><img src="" alt="Zeldman.com Web design news and
entertainment since 1995. ISSN #1534-0309."/></a>

<!-- or just -->

<a href="/"><em>Zeldman.com</em> Web design news and
entertainment since 1995. ISSN #1534-0309.</a>

<!-- for the buttons -->

<a href="http://alistapart.com"><object data="/i/bans/ala100bano.gif"
type="image/gif">
  A List Apart: For people who make Web sites.
</object></a>

<!-- or -->

<a href="http://alistapart.com"><img src="/i/bans/ala100bano.gif"
alt="A List Apart: For people who make Web sites"/></a>

So, did that clarify my position, or do I sound more like a quack than ever? ;-)

~~Ian

[mmj]

So, did that clarify my position, or do I sound more like a quack than ever? ;-)

No, I see what you mean now

[CosmicCatalyst]

So, did that clarify my position, or do I sound more like a quack than ever? ;-)

I agree, your post was very thought provoking and informative

Thank you for your insight,
Cosmic