Anne van Kesteren

PNG, object and IE

My new layout supports the first two and not the last unfortunately. (I am talking about IE for Windows if this may be unclear.) PNG works great for me, with PNG the font for the header still looks good and can be made transparent, so I can always implant a style switcher if I want, since the title and logo graphics are black.

I currently use (on the beta version) object to embed the PNG for the logo, like this: 

<h1>
 <a href="/weblog/" rel="bookmark">
  <object data="logo.png" type="image/png" height="70" width="70">
   Weblog about <strong>Markup</strong> and <em>Style</em>
  </object>
 </a>
</h1>

IE would support this: 

<div id="header">
 <h1>
  <a href="/weblog/" rel="bookmark">
   <img src="logo.png" alt="Weblog about Markup &amp; Style" />
  </a>
 </h1>
</div>

Using the object tag is obvious more semantic since I can use elements in the 'alternate' text. Besides that I can specify the MIME-type for the image, I more forward-compatible, more Google-compatible, only not IE-compatible. (Besides that IE doesn't support PNG completely).

I would like suggestions of you:

  1. If you are an IE user, do you feel betrayed if I do this (I will do it if nobody complains ;))?
  2. If you are a markup expert, is my object example really valid? (It validates, but I think it is invalid since the a element may not be nested.) Thanks to Egor Kloos I now have a better solution. I updated the code above.

Comments

  1. Just off the top of my head here... Do you need the second <a> tag? Make the 'header' a H1 instead of using a div and drop the H1 tag within the object tag. To me that would make more sense. Or is there a validation problem with that approach?

    oh BTW. I'm not a IE user.

    Posted by Egor Kloos at

  2. Yeah, the second a element, I'm not sure. If object is completely ignored by the user agent it would be invalid since a header element may not have a surrounding a element. So the UA could break.

    I'm testing you way now; I think it is definitely better. Sometimes you just don't think of obvious things.

    Posted by Anne at

  3. Then add an id to the html tag (like id="annevankesteren-weblog"), so you can style elements in the head section too.

    Anne - given the usual audience of your weblog, I'd say it would be pretty neat to focus on markup, semantics, and proving new standards in practice.

    Can't do such a thing on a company's website, but in your particular case: go for it ;)

    Posted by Martijn at

  4. id on the html element? Not in XHTML1.1 :): <html id="">.

    Martijn,
    Could you e-mail me about your ideas? You e-mail address on your site seems to be broken ;) I will e-mail you about your ideas; Dutch is still the easiest language to discuss/talk with someone.

    Posted by Anne at

  5. I think that the people interested in the things you write about should know better than to use IE. That said, I also believe a serious webdesigner should strive for graceful degradation. Web Standards come in a package. Going for advanced stuff is cool, but don't forget about accessability!

    And why not use image replacement to do the job of object? Any specific reason?

    IE not supporting PNG-transparency is not too much of a problem I think, it should still be readable/accessible. And I'm sure you are aware there are workarounds (you could use conditional comments —yes, I know they're ugly— and javascript).

    Posted by Ben at

  6. Anne - I sent you a message with your contact form.

    Posted by Martijn at

  7. At first I was going to suggest using <object> to serve up your PNG, with a fallback to an <img> with a GIF image (and appropriate alt text). (As I do with SVG's on my blog.)

    But then I said, Screw it! Let it break in IE. However, if you're going to let things break in IE, you might want to serve up a warning to your IE-using visitors. (Which, again, is what I'm doing now on my blog.)

    Posted by Jacques Distler at

  8. Come to think of it, why PNG anyway? The big advantage (now that the GIF patent has expired) of PNG is full alpha-channel transparency.

    But you don't actually use that in your banner. The closest you come are images with a black foreground on a transparent background. That can perfectly well be done with a GIF image.

    So, aside from the "stick it in the eye" of IE users (more power to you!) aspect, why not just use GIFs?

    Posted by Jacques Distler at

  9. GIF doesn't get that smooth, you get white border around it, you could remove this, but it will be ugly.

    The only way to do it with GIF is not using alpha transparency, but use the background image (orange-yellow stripes) on the 'alpha tranparency' places. If I did this, I would loose the flexibility of for example a style switcher.

    Posted by Anne at

  10. Well, OK, the antialiased images, with alpha-channel transparency are nicer, but here is what you website looks like using GIFs instead of PNGs:

    http://golem.ph.utexas.edu/...

    No question that the PNG version is nicer, but -- all things considered -- the GIF version ain't too shabby.

    Posted by Jacques Distler at