Don't kick your visitors's IE 6 and below out of your css layout

written by aext on November 25, 2008 in Articles with 16 comments

Designing one css layout to make it Cross-Platform compability is so crazy, maybe you like the Firefox with powerfull support css and the IE7 cool and stupid web browser but nowaday someone’s still using the poor browsers like IE 6, even IE 5. How to make all your web visitors happy when you display your css layout. It’s not simple likes saying “This web displays best in Firefox and IE 7 above” at the bottom of your webpage like everyone are doing. No, it’s stupid. Dont do that. Please make it’s compability to all web browser as you can, to all is hard for you but at least, dont kick the IE 6 and below out of your css layout.

Use IE PNG Fix

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported.

I won’t go deep into explaining how this works as you can easily find more info on the author’s site. Suffice to say that you need to call the iepngfix.htc file as an ie-only dhtml behaviour attribute on the img element and/or any other element where you may want to use png background images on.

The only problem with this script is that it won’t work with repeating background images.

I just give you an example:

img, h1, div .PNG-bg-class {
    behavior: url(../iepngfix.htc);
}

Apple website is using this script to make PNG background work well in IE 6 and below.

How to make IE 6 and below versions support :hover events.

IE 6 and below dont support :hover events other than links. But, you can make it work well with script name Whatever:hover. It’s another htc script, so that you can do it easily like PNG script above.

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

Go to Whatever:hover script homepage to check some information.

When needed, separate your css properties to each web browser supporting.

Ah ha, this is so cool and useful for web designers. I wont go deep in this solution, but i will explaint an example for you to understand. So, you make an DIV tag and you need it margin left exactly 20px, ok i create one for example.

.yourdiv {
   margin-left: 20px; /* all browsers including Mac IE */
   *margin-left: 22px; /* IE 7 and below */
   _margin-left/**/: 18px; /* IE 5.0 */
   _margin-left:/**/ 22px; /* IE 5.5 only */
   _margin-left/**/:/**/ 18px; /* IE 6 only */

   background-color: #fff;
}

Why’s that different about value? Because, sometime when you margin some div tag via css, maybe it work well, but maybe Firefox work perfect, but the IE 7 still just margin a bit or do nothing (example above happened to me many times: margin left 20px, Firefox is ok, IE 7 just margin 15px, IE 6 do nothing …). Just follow that rule above and you can target css properties to each IE version you want.

You can do that by using conditional comments, here is the complete syntax for using:

<!--[if IE]>
do some of your css here if web browser is IE.
<![endif]-->

<!--[if IE version]>
replace version with IE verion number
you want to do some css.
&lt![endif]-->

<!--[if gte IE version]>
replace version with IE verion number
you want to do some css when IE version > this IE version.
<![endif]--> 

<!--[if lt IE version]>
replace version with IE verion number
you want to do some css when IE version < this IE version.
<![endif]-->

That all are simple, right? Dont kick the IE out of your css layout. This entry just need to talk about it.