Tutorial :IE6 transparent PNG's are stretched out when using supersleight jquery plugin



Question:

This is driving me insane: I'm an intern: my boss wants me to use the jquery plugin "supersleight" with 32-bit png's to make them transparent in IE6. I got all the html working, and they are all placed correctly, but when I apply the javascript those png's that use padding are stretched out. I needed padding to get some buttons in place in my css, otherwise I would have had to declare 12 classes instead of just 5, (instead of declaring left:Xpx for each object; I can do "padding: 0 Xpx 0 Ypx"
Is it impossible to fix this without adding a separate class to each page?


Solution:1

To make PNGs work in IE6 they are displayed using a filter style. Obviously the script takes the size of the element to set the size of the image. The padding is included in the size, so the image will cover the padding also.

You could try using margin instead of padding. The margin is not included in the size of the element.

Another solution could be to add another element around the image, and apply the padding to that element instead.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »