Some resources for fixing IE6 Wordpress site rendering

I’m in the process of deploying a website which has recently been rebuilt in Wordpress to take advantage of the CMS back end and easy administration. Though the site before Wordpress was originally working fine in IE6/7/8, Firefox, Safari, Opera and Chrome I’m now looking for any cross-browser issues that have snuck in during development. These are some of the issues I’ve had (mainly with IE6’s rendering of the site) and how I’ve resolved them:

Transparent PNGs

I’m using transparent PNGs both as within img tags and as background’s to some div elements. Transparent PNG’s do not render natively in IE6. Luckily, there is a fantastic plugin for Wordpress which automagically applies one of a number of PNG fixes, called HITS- IE6 PNGFix. You simply install the plugin, configure it in the settings (which means choosing from 1 of 5 PNG fixes), and it just works. Under the hood, it’s simply using the filter CSS property to do a DXImageTransform on each of the relevant images. You may notice a little flicker if you have a lot of images whilst the images are processing, but it doesn’t take much time to do so. I also found I had the greatest success with the Twin Helix v2.0 method, as Unit and SuperSleight methods seemed to play with the background offsets I had set on my background images in the CSS.

CSS Hovers

I took the clients existing menu and made it dynamic, so that by adding a new page in the Wordpress back end it would appear in the menu without needing any code. The menu is a simple CSS styled hierarchy of unordered lists, which makes appropriate use of the CSS hover property to hide and show sub-menus. IE6 does not support hover except for on anchor tags. Luckily, I found this nifty little script which you plug into the behaviour property of your body tag and it does the rest.

To use within Wordpress (I’m using the Hybrid theme framework):

1. I copied this script into a file called csshover.htc, and placed it into the root of the Wordpress install
2. Created an IE6 stylesheet called ie.css which I placed in /wp-content/themes/hybrid/library/css, adding the following line to it:

body { behavior:url("/csshover.htc");}

3. Then, within the theme header /wp-content/themes/hybrid/header.php, I added the following underneath the current stylesheet reference, to give us a conditional stylesheet which is only used in IE:

Conditional stylesheets and CSS validation

There were also a number of fixes that were required due to box model issues that plague IE6. This was really easy to deal with now I had a conditional stylesheet, from above. In addition, the client required both the HTML and CSS validated, but IE specific hacks, which are often outside the CSS spec could now be relegated to ie.css. For example, I used Lightbox, which uses the following CSS rule in its lightbox.css that does not validate in the W3C CSS validator:

#prevLink, #nextLink {
  background-image: url(data:image/gif;base64,AAAA); \* Trick IE into showing hover \* 
}

I simply cut and paste this rule into ie.css and was able to get the site to validate in the CSS validator. Success!

Hope this helps someone!