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 & Style" /> </a> </h1> </div>
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:
objectexample really valid? (It validates, but I think it is invalid since the
aelement may not be nested.)
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.
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.
Yeah, the second
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 ;)
id on the
html element? Not in XHTML1.1 :):
I will e-mail you about your ideas; Dutch is still the easiest language to discuss/talk with someone.
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?
Anne - I sent you a message with your contact form.
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.)
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?
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.
Well, OK, the antialiased images, with alpha-channel transparency are nicer, but here is what you website looks like using GIFs instead of PNGs:
No question that the PNG version is nicer, but -- all things considered -- the GIF version ain't too shabby.