Don’t kick your visitors’s IE 6 and below out of your css layout
Spread it!
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. <![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.
15 User Comments
Trackbacks/Pingbacks
-
-
15. Sep, 2009
[...] I would like to recommend a small script Whatever:hover and one post I published long time ago Don’t kick your visitors’s IE 6 and below out of your css layout. I really don’t get what web designers want. When I published a post with saving IE6 in [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
It’s great, bro, thanks for sharing!
Not including users that use older versions of browser such as IE6 would really cut out a lot of your market. There a heck of a lot of people that still use it, especially in my business’s scope.
But is it still worth supporting IE5? The statistical data from a couple of sites we are running only read about 11 hits from IE5 and below.
I completely understand we need to support people who don’t have these new browsers, but are we just giving them a crutch to lean on rather than pushing them to at least IE6?
Nevertheless a good article
.
Uhm, you’re right! But i just thought you will be lost some visitor’s happiness.
So…It’s just some tips help you improve your design skill.
Thanks for reply ^^.
Haha yeah customer satisfaction is extremely important but hey we gotta say no sometimes, right? yw
The lowest IE I support is IE6 but I also use Google Analytics to track browser usage, and to be honest, I don’t remember when I saw someone with IE5 or lower.
In this my entry, i just said “sometime” and i did not say that that lot of people still using IE5. But i think, make sure you dont lose any visitor’s happiness, just do it if you want…or dont want, just do nothing.
So..i said above, it’s just a practice and some tips to help you improve designing skill.
That’s all! And thanks for your comment.
IE 6 is, what? Eight years old? With 2 billion bugs.
There are better alternatives. IE7 have been there for quite some time, and IE8 beta can be downloaded already. Firefox, Safari, Opera and Google Chrome are all easy to find.
People who are too lazy to upgrade from that bugridden piece of junk doesn’t deserve a good experience on the net. In fact, we should make the sites unaccessible with IE6 – because people who has not upgraded in 8 years will not do it until they are forced to.
I really understood what IE 6 is. But visitor is visitor. Website cannt live without visitors. That all.
I will not forget any visitors
. I will make they happy with anything i can do. 
@@Tom Stone: Me too. I hate IE 6, but i dont ignore it from my mind when design.
Hope you all understand.
I think the problem is the users using IE 6 are never going to update without a reason. Someone has to take a stand and say thats enough. If you were driving a car that wasn’t allowed on a road because it was too old/unsecure/unsafe/didn’t work with the laws, you would upgrade it. I don’t get my we would want to facilitate the use of old/bad software when the upgrade alternatives are free.
I do agree, simply putting a “You should upgrade” link/message isn’t helpful. There are many non-savy users out there… I would love to see a site that is for people who need to upgrade. Explain to them their options, pros and cons and simple steps to upgrading… designers could then point users in that direction.
@@Lynn: Thanks for your suggestions. I will keep it in mind.
IMHO, it all depends on the market you’re targeting.
If you, for example, run an ecommerce site and IE6 users make up a noticeable portion of your traffic, then you should cater for IE6, indeed. Same with sites that get a lot of “corporate” traffic – we all know IT departments in corporations don’t offer frequent updates to employees…
On the other hand, sites more targeted to somewhat tech-savvy users, or that just don’t get that much IE6 hits can safely (and gently for now) punish that outdated browser
P.S. : nice work with this Twitter Username field – haven’t thought of that one before
will bookmark it for future reference. Thanks!
Why should we make everything compatible with ancient browsers? People will never update this way.
I got a nice tip from someone yesterday; fake an active X pop-up on top of the that re-directs people to the microsoft site. There people will get the message about updating etc. And because it’s from the microsoft site, people will probably update. At least i truly hope so.
Nice Article.. Keep it up.
Still a large number of internet users are using i.e6 –
This article shows how to provide them same food as the others