User Comments

nice trick the only problem with this is that the person viewing the site has to use Internet Explorer. maybe your client can risk not supporting other users but i for one won’t switch two ie just to view some site.

This technique works with Internet Explorer AND any Mozilla-based client.

One of the problems with this technique is that the css will not validate:
http://tinyurl.com/2jkk6

Of course this remark is from the point of view of a developer, not from the point of view of the customer.

But: maybe you can achieve the same result in CSS with using z-index. I haven’t tried it out myself with this page but if it works, you’ll have valid CSS and it will also work in Opera.
In case you’re not familiar with the z-index technique:
http://www.dzinelabs.com/Pages/positioning_four.htm

I know Luc. It fails to validate because I used proprietary tags.

The same effect could be achieved with a semi-transparent PNG and a little CSS positioning.

However, as my knowledge increases so do my options: If I were to recreate this today, I would simply use ImageMagick (http://www.imagemagick.org/) to generate the images on the fly and stream them out to the browser. The performance hit would be minimal for such a simple task - and validity would be assured.

Yeah, you are right. But using PNG might be a bad idea because IE has some problems with it (isn’t that a surprise).

Now, on a side note: you might want to think about styling the “confirm” word in a slightly darker font: it’s sometimes hard to read :-)

“But using PNG might be a bad idea because IE has some problems with it…”

Whereas the ImageMagick technique will work with every graphical browser ever! :-)

“…you might want to think about styling the “confirm” word in a slightly darker font: it’s sometimes hard to read…”

I’ve just changed from #c0c0c0 to #a0a0a0 - try it now.

“I’ve just changed from #c0c0c0 to #a0a0a0 - try it now.”

Better :-)

the trick cant be used inside table cells… or am i just doing it all wrong.