How to set container height to 1px in IE6

If you use clearfix class to clear floated elements throughout your site, you might have been faced with a large gap in IE6 browser, even if you specified 1px height property, like so:

.clearfix { clear:both; height:1px; }

There is a very simple solution for this problem - just add the line-height property.

.clearfix { clear:both; height:1px; line-height:1px; }

IE6 and Transparent PNGs

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.

Rogie’s CSS PNG Fix for IE6

UPDATE: View this Updated post for a full coverage of IE6 and Tranparent PNGs Issues

Update: A working example can be found here - IE6 PNG fix

Rogie over at komodomedia wrote an excellent article explaining in details how to make sure that IE6 displays transparent png images correctly. I have scanned over the comments and saw that somebody asked whether that technique worked with repeated background images, which it wasn’t.

So I have looked over that useful little snippet

#container {
width:780px; margin:15px auto 0 auto;
background:url(images/bck-content.png) repeat-y top left;
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

and saw that if I change crop to scale,

#container {
width:780px; margin:15px auto 0 auto;
background:url(images/bck-content.png) repeat-y top left;
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

the repeated background images would actually start displaying properly.

Here are some screenshots of what I am talking about.

repeated background image in IE6 without png fix

repeated background image in IE6 with png fix and crop setting

and Lo and Behold - repeated background image in IE6 with png fix and scale setting