One of the bigest challenges of doing web design is not related to web design at all. that's the IE6 browser. Just because a plenties of web users still use this browser, web designers can't fully benefit features available in CSS. Of course many designers like me think IE6 is obsolete by now. Maybe sometimes telling IE6 users that their browser is least compatible with the site, or even not showing the site to them and telling them to upgrade, or maybe sometimes redirecting them to breakIE6.com are the most favourite and easiest to do.
But sometimes you really have to make your site compatible with IE6, maybe your client wants this!
Here are some solutions to some of the most common problems of IE6.
Code just for IE6
Fortunately with all the fundamental problems of IE6 and microsofts selfishness for not making IE6 web standards compliant, there is a way to write codes that just IE6 sees them and it's a great chance for fixing problems with IE6. It's done with Conditional Comments.
code example:
<!--[if IE6]>
Oops! Looks like you're still using Internet Explorer 6!
You deserve better!
<![endif]-->
If the code above is included in a webpage and user is using IE6, part of it which is between the starting and closing if will be part of the web page. that's if that's a css code, it will be applied to the page, if html code, it will be included in page, and if it's javascript code, it will be run.
But all other versions of IE and all other browsers will simply interpret it as comments and will simply be ignored.
Using the following snippet, we can link to a css file which we only want IE6 to see and apply it:
<!--[if IE6]>
<link rel="stylesheet"
href="http://www.sepidweb.ir/LessEqualIE6.css" type="text/css"/>
<![endif]-->
Conditional comments aren't just for IE6. We can specify a collection of IE versions, or just any other version of IE. Refer to Microsoft - About Conditional Comments for more information.
Correctly showing alpha-transparent PNGs in IE6
Alpha-transparent PNGs aren't shown correctly in IE6.
IE6 has problems showing 32-bit PNG files. Some scripts has been written that use "Alpha Image Loader Filter" which is a feature of IE to solve this problem.
One of the best is iepngfix.
You just need to put two files on the web server, and then define the images you want to be filtered using CSS.
So by having a little change in code, png images will be shown correctly. This script is also compatible with inline, and background images.
So we don't have to just use 8-bit png files in IE6
For more information refer to TwinHelix IE PNG Fix
Float Clear
This problem is not so unique to IE6, some older non-IE browsers had the problem of not clearing the inner of floated elements correctly.
This is if we put an image in a div and then float the image to a side, then we expect the div to contain the image and have width and height at least the same as the image, not a div with no height. If it doesn't happen, then we say the floated inner element has not been correctly cleared by it's container.
There is a very well-known css hack named clearfix for fixing this.
Add the following to your main CSS file, then add the "clearfix" class to any element you want to clear correctly.
.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-table}
/* Hides From IE-mac */
* html .clearfix{height:1%;}
.clearfix{display:block}
/* End Hide From IE-mac */ There is also a simpler solution. just give a value to the overflow property of that element and specify it's width. For example:
overflow:hidden;
width:100%;
Any other value for overflow and even specifying height instead of width does the same. Also if specifying overflow makes unwanted changes in design, we can just give values to overflow-x or overflow-y.
Doubling margins
If an element like <div> is floated to one side, and then a margin or padding is specified on the same side, IE6 doubles it.
The simplest solution for it is to change disply from block to inline.
Quickly solving some of the problems of IE6 by specifying hasLayout
As the last note, some of the problems of IE6 can be solved by setting hasLayout.
hasLayout is in innerworkings of IE6 and if everything worked correctly we never needed to know about it.
For knowing how to display an element, IE6 keeps a property named hasLayout for every element and if that element has this property set, it takes more time to be rendered.
But to display the page more quickly, IE6 sets it to false for some elements.
Sometimes elements are shown correctly just if they have hasLayout set. So if we knew how to tell IE6 to make elements have layout, life could be easier sometimes.
By specifying these values for the properties, elements will be considered to have Layout by IE6.
width: anything other than "auto";
height: anything other than "auto";
float: left or right;
display: inline-block;
zoom: anything other than "normal";
So sometimes simply specifying a width or height for an element can solve problems in its display. For more information refer to Concept of hasLayout in IE\Win.
Finally
I tried to write the main tips to design pages acceptably for IE6. These were not the only problems of IE6, and there are many more solutions, but I think it's enough. especially that fortunately IE6 is slowing dying out.
I usually don't make pages perfect for IE6, even if I have to make it compatible with IE6 to some extent. Users need to know there is a problem with their browser.
most of the tips were taken from Definitive Guide To Tamming the IE6 Beast and I chose best of them based on my experience. If you want to know more, you can check the source article.
