Request a topic or
contact an Arke consultant
404-812-3123
IE, hover, and transparent PNGs

Arke Systems Blog

Useful technical and business information straight from Arke.

About the author

Author Name is someone.
E-mail me Send mail

Recent comments

Archive

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2014

IE, hover, and transparent PNGs

IE, particularly IE6, has a few quirks that anybody working on websites needs to know about.  Luckily there are workarounds, but unfortunately the workarounds for different problems don't always play nice with each other.

1) Transparent PNGs don't work right by default.  Inside an image tag, the alpha channel of a transparent png will be ignored in IE6, leading in my case to very ugly corners on a rounded window.  To fix this, you need to use CSS to specify a "filter" to have IE display the image with a different image display routine.  The easy approach is to run some javascript to go back and rewrite all your images if you're in IE6; scripts like SuperSleight or Unit PngFix will go through and dynamically change your page to use filters for PNGs.  Unfortunately, I've had bad luck combining these scripts with other fix scripts; on my latest project I ended up doing all of my PNGs with external style sheets, then including an IE6 specific style sheet using conditional comments, and manually setting the PNG filters in the style sheet.  If you're doing it manually, note that you may also run into IE z-index problems, in my case it was on some input boxes, that may be solvable by putting the problem elements inside a position:relative container and manually setting their z-index.  Yes, the position:relative shouldn't be necessary, it's just a bug workaround.

2) CSS "Hover" doesn't work right except for links in IE6.  Particularly, it doesn't work on images, so if your client wants an image to light up when the mouse is over it, you're going to have to deal with this.  Adding javascript "onmouseover" and "onmouseout" events can make hover work by dynamically swapping the CSS class when the mouse triggers the javascript.  The easiest way to do this is 'whatever:hover'; it's a .htc file that you add to the CSS for the body of your page via the IE-specific 'behavior' property, and it automatically tracks down your hover classes and adds the necessary Javascript to invoke them.  If doing it manually, what you want are onmouseover and onmouseout events that change the CSS class, coupled with CSS classes that specify the non-hover and hover behavior you want - but you only need this for IE6, so it's probably best not to do it manually because the conditional comments throughout your code will get ugly quick.

Unfortunately, whatever:hover and unitpngfix didn't play nice together for me.  Manually doing the PNG fix was an acceptable workaround, and had the added benefit of not waiting for the page to load before swapping the pngs.

3) CSS "Hover" doesn't work right except for links in IE7 unless you set a strict doctype.  So, your first step is to set a strict doctype for IE7 to work right.  The main thing to be aware of when setting a strict doctype is that browsers become less forgiving; in particular, in-line elements can not have a width and height specified, so your stylesheets will need to explicitly set "display:block" if you were forcing widths and heights on spans.  Also be aware that your box model will change, from the IE specific quirks model to the actual correct spec, but you were probably dealing with that already due to cross-browser compatability.

I'm sure there are more troubles you will run into, but these were the main ones that caused an IE6 headache on my latest project.  I've found plenty of info on getting PNG transparency to work, and plenty on getting hover to work, but nothing on both together.  It can be done, but the easy drop-in fixes might not be enough for you and it pays to understand what the root problem they are addressing is.


Posted by David Eison on Tuesday, December 16, 2008 3:52 PM
Permalink | Comments (0) | Post RSSRSS comment feed