Tech Hive

As a designer, the biggest problems that I have with IE are the PNG transparency problem and the :hover pseudo class is not working unless it’s used in the a element.

Thanks for HTC which is only understood by IE 5.5 and above browsers — I’ve found some handy “hacks” to work around these 2 limitations on the browser designers/programmers’ love to hate.

Note: calling it in CSS will make your CSS file invalid even though it’s a part of CSS property lists, I tested it against CSS 1, 2, 2.1 and 3 (just to be sure) so… CSS valid-freaks sorry… Maybe it remained to be just a part of the draft?

PNG Transparency

I have to admit that I haven’t really looked that hard for PNG transparency hacks, sure you can use PNG 8 but, isn’t it just a “PNGized” GIF? Anyway, if you’re certain that you won’t be using your image on plain backgrounds and your background does not have patterns on them then PNG 8 will be a good solution.

So, while I was looking for a hack to make PNG work on IE 6, I came across IE PNG Fix of Twinhelix which is a good enough solution for me because it doesn’t complicate things for me and it also works on PNG backgrounds on CSS and images you have to insert into your HTML file. However, this being a “hack”, of course it has some limitations too.

The list is from the author, the ones that with emphasis are mine.

• Can’t help IE versions prior to 5.5, sorry.
• Users can’t right-click-save processed PNG images, they’ll save the blank GIF file if they try that. In some cases this might be a feature, not a bug…
• The script detects the “.png” extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere. Apparently, this is also an issue in RoR, I really don’t know why but the images will still not be transparent unless you specifically call the image using the <img> tag, so say goodbye to your <%= image_tag("path_to_file_here") %> way of calling images (unless it’s a JPG or GIF of course).
• It’s most reliable on elements with non-’auto’ dimensions set. So, give images and other elements width/height values; ‘100%’, ‘10em’ and ‘200px’ and so on are all OK, otherwise, you will have a heart attack once you’ve seen it in IE, it’s transparent, yes but still, it is not pretty.
• Background PNG images can’t be tiled. This is a limitation of the IE filter.
• Similarly, padding and borders don’t indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

For it to work, all you have to do is create a blank transparent GIF file (it doesn’t matter what size it is) put the path to it in the htc file and call the htc by adding

* { behavior: URL(/path_to/iepngfix.htc) }

anywhere in your CSS file. Note that you can replace * with img or whatever element you want. Then voila! PNG transparency has been achieved.

Applying :hover pseudo class for whatever element in IE 6

As I’ve said before, another shortcoming of IE 6 is that it only applies the :hover pseudo class on the a element so it’s really hard to create a hover state for menu items using the sliding door technique unless all you have to do is change the menu item’s link color. Unless you love cutting images for specific menu items or your item’s width is fixed and don’t care what it’ll look like once you have increased the font size, then I guess you need not worry about it.

Anyway, this time, I need not look so hard because of whatever:hover yey! All you have to do is put the htc file anywhere in your site, call it in your CSS using the behavior property again like so –

* { behavior: URL(/path_to/csshover.htc) }

(again you can change * to whatever element you want) and voila! You can apply the :hover pseudo class to whatever element that you want and you can be absolutely certain that it will be reflected in IE 6. Lovely.

Is there a hack for IE 6 that you know? Please do share.

Update (April 28, 2008): Joni buzzed me earlier to ask if maybe adding the behavior property in a stylesheet that’s meant only for IE will make your stylesheet valid. I tried it at Last Leaf and it did! So… now you can make your site valid even though you’re using htc. I can’t believe I failed to test that when I’ve been using IE conditionals for more than a year already! hehe Credit to Joni Ang, XHTML/CSS/Wordpress theme designer extraordinaire Also, if you’re using wordpress and you added htc within your theme’s folder, don’t forget to add the complete path to your blank.gif and htc, otherwise, it won’t work.