from a social perspective.com

At work today I was striving with IE7 and absolute positioning.
It seems like IE7 has a default of “background: transparent;”, and takes it a bit more literaly than we’re used to..

So if you set an element to cover another with absolute positioning, all events (onmouseover, onmouseout, onclick, etc) is passed on to the underlaying element. That is, unless the overlaying element got a background other than “transparent”.
A color value, image, or transparent png with at least 1% opacity works, but it has to have SOME opacity.

It is not the first time I’ve run into this problem, and I’ve always solved it by adding a semi-transparent png with 1% opacity of either white or black. But this seems like a dumb hack, having to add more images and so on.

But today I discovered that setting an non-image value for the image url() (like url(undefined)) as background works the same way as adding a background-color or a png with opacity 1%, and thus removing the transparency from the element.

The url() cannot be empty, it has to have SOME value, like “undefined”, “test”, “foo”, or whatever suits your needs:


/* This will work */
#foo {background: url(bar);}

/* This won't */
#bar {background: url();}


So there you go, now the element has a transparent background, while not passing the events through to the underlaying element
[ratings]

I stumbled over this Channel on Stage6 tonight, looks promising!
Pixel Perfect with Bert Monroy

“Be amazed and learn as master digital artist Bert Monroy takes a stylus and a digital pad and treats it as Monet and Picasso do with oil and canvas. Learn the tips and tricks you need to whip those digital pictures into shape.”

So for all you photoshop/illustrator entusiasts out there, grab your “pencil” and tag along!

[ratings]