IE CSS hacks
In my web developing adventures, I’ve come across one definite truth – Internet Explorer is a big pain in the ass. Version 7 has come a long way from version 6, but it is still a bit quirky. Seeing as how I write code in a text editor (Coda is my tool of choice), I can plug away all day long writing standards-compliant code knowing that when I go to view it in a a GOOD browser like Safari or Firefox, everything will look the way that I had intended. I also know that when I go to open the page in IE, there’s always going to be some sort of surprise. I have gotten good at re-writing things so that they render similarly in ALL browsers – meaning – you can write code that IE won’t mess up and still get the desired effect in Safari and Firefox – but every once in a while that solution is out of reach. When I hit that roadblock, there are two favorite CSS hacks in my goodie bag…
/* IE6 and below */
* html #myId { }
/* IE7 */
*:first-child+html #myId { }
Both of the hacks above are valid CSS, so no worries with messing up your page validations using these. Important note – always try everything you can to NOT use these first, and make these a last resort. You’ll be a better coder because of it.
Transparent PNGs in IE6
Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.
In order to do this we will actually write the image into the page twice – once for IE6 and below, and again for all the other browsers. Here we go…
1 – create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).
2 – here’s the XHTML to put in the <body> of your document…
<!--[if lt IE 7]>
<img id="ie6image" src="spacer.gif" alt="" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png', sizingMethod='image');" />
<![endif]-->
<img id="theimage" src="myimage.png" alt="" />
* notice how we write the image the first time using Microsoft’s Alpha Image Loader – and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ – then we write the image again the “normal” way for all other browsers.
3 – here’s the CSS to put in the <head> of your document or external stylesheet…
#theimage, #ie6image {
width: 100px;
height: 100px;
border: 0px;
}
* html #theimage {
display: none;
}
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read – telling those browsers to not display the second image.
And there you have it – a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript – just standards-compliant XHTML and CSS.
-
need my help?
Interested in having me be a consultant on your next project? to email me.
-
what i’m reading...
