About Blog
March 11, 2008

Just For Fun

Comments (4)
Category: Personal

This post was inspired by this, this, this, this, this and this

lucky.jpg

Aren’t those doggies adorable?!? (click on the links above the picture to see more doggies) :)

March 9, 2008

IE6 and Transparent PNGs

Comments (7)
Category: IE6 Bugs

Background: Internet Explorer 6 does not properly render images that have PNG Alpha Transparency. Due to this bug, Ie6 displays images that have alpha transparency (i.e saved as 24-bit PNG) as if they have solid grayish background.

Workarounds: There are different situations where you have to use different techniques to force IE6 into rendering PNG images properly. Follow this link to look at the working example.

Non-repeating and not background images.

In this case, I normally use ie6png.htc fix. In my example there is an image of a leaf that employs that technique:

HTML:

img src="images/decor.png" height="133" width="156" class="trans"

As you can see, that image has a specific class assigned to it (you can generally reuse that class for all nonbackground and not repeated images on your site). If you take a look at the source of the document (right click > View Source), you will notice the following in the conditional statement (that will only be implemented for IE6 browser):

CSS:

.trans { behavior:url("iepngfix.htc"); }

Important: You must specify the dimensions (width and height) of the image.

Non-repeating background images

For the transparent background images I use IE’s proprietary tag - filter. In my example two images will fall under this category - background-top.png and background-bottom.png (top and bottom rounded corners).

In the conditional statement you will find the following:

CSS:

#container {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-top.png',sizingMethod='crop'); background:none;}
and
#container {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-bottom.png',sizingMethod='crop'); background:none;}
Important: Note that sizingMethod is set to crop.

Repeating background images

That’s right, you can get those transparent png background images to repeat but only in one direction (i.e. either repeat-x or repeat-y). Here is how:

In the conditional statement you will find the following:

CSS:

#container #main { width: 453px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-repeated.png',sizingMethod='scale'); background:none;}

Important: You have to specify width of the element that contains that repeated background image (otherwise it will not work).

Important: Note that sizingMethod is set to scale.

Your might run into a problem, where links are not clickable in IE6, in that case you will need to specify z-index for those links.
#container #footer a, #container #footer a:visited { position:relative; z-index:2;}

That was my collection of little tricks that I utilize all the time when dealing with IE6 PNG Transparencies.

Sunday Weekly Roundup #21 - 03/09/2008

Comments (0)
Category: Weekly Roundup