Recently I was making a JS slideshow and because requirements were unusual using a third party slideshow was not an option.

Images were supposed to be rendered in a particular fixed width and length (even if they do not actually fit proportionally, well that’s what client wants… ). Being lazy (and because client did not ask for performance), I just resized images “in-browser”.

I had to create a function that renders it right (without loosing quality) both in IE and other browsers. Old IE (dough! as usually… ) don’t support automatic ALPHA image rendering (basically that’s smoothening when image is resized), so I had to manually forcefully do it in the function.

But that was an easy part!

Apparently, in IE, when resized images and DIVs are used together as layers (z-index), positioning (TOP, TOP-MARGIN etc…) starts behaving VERY weird. I guess that’s because even if image is resized, it’s pixels are still treated as actual pixels (those before resizing). So style TOP:-50px; might actually be a proportion of resized image, hence less than 50.

Well good thing is that there is a solution! Tadaah! 🙂

Use all your DIV elements first, and IMG at the end. Thus, even if your DIV elements are at the bottom, place them first in the code and then just move them DOWN (which will require to lift an IMG element up). The strange thing is that moving IMG element up (as well as moving DIV element down ) does not cause any problems.

• Web