Panoramio's Blog

Playing with the effects in script.aculo.us I added a new little effect to switch from an element to another one smoothly.

Better see it in action, go to Panoramio, register as a new user, and see the little fade out of “Login     Register” and the fade in of “Hi Foo Bar”.

Sure enough, it was not working on IE. It’s a documented problem, the Opacity effect didn’t work on elements without layout. The “layout” is some kind of karma that IE throws on certain elements, and you can activate it manually if you use the right CSS incantation.

So here we go, I apply height: 1px; to my two spans to no joy, it still didn’t work. Let’s try zoom: 1… on the money! zoom is not a valid css property, but my page didn’t validate anyway (and no, I don’t care) so I’m sell on zoom.

But now I have another problem. If you have cleartype activated the result is ugly beyond belief. Pssst. Well, nobody said that’s going to be easy.

Another google search, and we see this lovely blogger giving us a work-around. Just put an explicit background color to this element. Luckly enough I’m using an uniform background for this part of the site, so I just added a background-color: white; and now I have something that works like a charm at the very least on IE6 and on Firefox.

I can now take my breakfast.