I’ve been having these strange Dreamweaver issues lately at work. Opening and clicking in any section of a php or asp document was immediately followed by a Dreamweaver crash. It was really puzzling to me and after running defrag and a virus scan I even considered to re-install this darn Dreamweaver.

This morning though it happened on my home PC, and it was clear that I need to either dump DW or find a solution. So 15mins of googling revealed a Dreamweaver Daylight Savings Bug. Who would have known? Apparently, this bug has been live since last year.

This bug manifests itself in all its glory when clock goes back one hour, which causes a corruption of a WinFileCache-AD76BB20.dat file. So to fix this you simply need to delete the WinFileCache-AD76BB20.dat file. Indeed – no more crashes.

Dreamweaver 8 or Dreamweaver CS4 are not affected by this bug.

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; }

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.

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