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:
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.
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.
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:
That all are simple, right? Dont kick the IE out of your css layout. This entry just need to talk about it.
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. <![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.
