Overcoming CSS Limitations In Internet Explorer 6 (Validated)
Friday, January 9, 2009
(Internet Explorer 6) IE6 is a browser notorious for its lack of standard compliance and CSS support. As such, browser conscious designers have to limit their websites to suit the limited CSS powers of IE6. Some hippie webdesigners might even argue: "Why should we even support that ancient, problematic, browser?". But, that's that. It is not like nothing can be done about them. They can be fixed.
Two reasons for doing the extra mile.
1. IE6 still holds 20% of the total browser usage world wide. [w3c stats]
Although this percentage is getting smaller as more upgrade to IE7, but it is still significant enough be concerned about.
2. A broken website is the last thing you want visitors to see.
You don't want your masterpiece website to look like junk to some users. A sure turnoff to potential customers if you are selling things online.
In this post, I have made a list of the limitations in IE6 that I have managed to surpass, as well as providing the code and explanations. The things that are touched on are: Fixed positioning, Max-width, Png Alpha transparency, Bottom and Right, and the Box Model issue.
Css Hacks, Css Tips, Css tutorials, IE6 css, web standards, all browsers css, IE6 css workarounds, IE6 position: fixed, max-width, Png Alpha Internet Explorer 6, IE 6 Sucks, CSS compatible, compatibility, graceful degradation, degrade gracefully, css degradation, position: bottom in IE6, position: right in IE6
The Basic Concept: Providing Alternative CSS, JUST for IE6
To make all the stunts possible, special CSS code will be needed. But, we must declare these code as only and only for IE6. This is so that other browsers won't read these unnecessary code and get confused, and so that the CSS will validate.
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
Your CSS Here
</style><![endif]><![endif]-->
The conditional opening and closing tags make the CSS code invisible to other browsers, by treating them as hidden comments. CSS Validators will also treat those as comments. Only IE6 and previous versions will be able to detect the code.
Position: Fixed;
Like absolute positioning, this allows you to place stuff on a specific part of the page, regardless of surrounding things. But it stays on the same spot on your screen, even if you scroll the page downwards, upwards, or even horizontally.
This is supported in CSS2 compliant browsers, which IE6 isn't. But since it is so widely supported, we can't be forgoing this wonderful function just for IE6's sake, right?
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv
{ position:absolute;
width: 222px;
height: 333px;
left: expression( 100 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( 200 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
Replace the yourdiv with the id of the div you want to fix. The 100 and 200 are the coordinates of the div on the screen. You can replace these values yours. The same goes for the 222 and 333 which are the div's height and width.
The trick here is to use javascript css to dynamically update the position wherever you scroll, so the div will stay rooted at the exact spot on the screen.
Also, like any other trick in this post, be sure to use the IE specific tags at the beginning and the end.
As this trick is not natively supported, it can cause "jaggyness" as viewers scroll down your page. To solve this, you can set your page's background as "fixed". (This is so that IE won't be forced to re-render the div for every line you scroll.)
Bottom: px; Right: px;
Sadly, these two properties are not natively supported by IE6. And this can be a great headache for some layouts with fixed positioning.
By adding some modifications to the previous workaround, we can still use bottom and right in IE6. The code below aligns a div to the bottom right corner of a page with fixed positioning.
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv {
position: absolute;
width: 222px;
height: 333px;
left: expression( document.body.clientWidth - 222 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( document.body.clientHeight - 333 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
The trick here is to add the browser's width and height to the position: fixed example, then deduct the height and width of the div element. Don't worry if you don't understand.
Again, simply change the 222 and 333 to the width and height of you div.
Max-width: px;
Max-width is the opposite of min-width. The div will expand till max-width as text is inserted and then the text goes into a new line.
Its quite werid why IE6 dosen't support max-width when it has support for min-width.
Nevertheless, here's the code
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv {
width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + "px");
}
</style><![endif]><![endif]-->
Change the 250 to the max-width of your div.
PNG alpha transparancy
PNG is an image format that supports different magnitudes of transparency. This means it can have semi-transparent pixels. Unfortunately, these semi-transparent pixels won't show though the stuff behind them in IE6. They will show up as ugly grey areas.
But, IE6 has a hidden ability to use PNG alpha transparency. To use it, we need to have an extra blank div, that will act as the PNG in IE6. This div will use a built in filter in IE6 to unleash PNG's alpha transparency. In other browsers, this div will not be shown as it has nothing in it.
You will also need to give your PNG image an id or class, so that CSS can hide it from IE6 and use the div to substitute the PNG.
Here's the css code.
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
img#yourimage{ display:none; }
div#alphaimage {
width: 222px;
height: 333px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='yourimageurl.png');
}
</style><![endif]><![endif]-->
Don't forget to change the 222 and 333 to your PNG's dimensions. Also, please do change the 'yourimageurl.png' to the location where your image is stored.
Here's how the html code for your image and the div should look like.
<img id="yourimage" src="yourimageurl.png" />
<div id="alphaimage"></div>
Box Model Bug
Though many consider this a bug, I think it's just the way IE6 does things differently from other browsers. Here is a page on wikipedia that explains it in detail.
Luckily, this problem is not too much of a challenge that it needs fancy code.
Just zerorize (set the value to 0px) for all padding. Use margins for a div inside another div if you want to make the illusion of a padding.
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
Your CSS Here
</style><![endif]><![endif]-->
Your CSS Here
</style><![endif]><![endif]-->
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv
{ position:absolute;
width: 222px;
height: 333px;
left: expression( 100 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( 200 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
div#yourdiv
{ position:absolute;
width: 222px;
height: 333px;
left: expression( 100 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( 200 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv {
position: absolute;
width: 222px;
height: 333px;
left: expression( document.body.clientWidth - 222 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( document.body.clientHeight - 333 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
div#yourdiv {
position: absolute;
width: 222px;
height: 333px;
left: expression( document.body.clientWidth - 222 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px');
top: expression( document.body.clientHeight - 333 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px');
}
</style><![endif]><![endif]-->
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
div#yourdiv {
width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + "px");
}
</style><![endif]><![endif]-->
div#yourdiv {
width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + "px");
}
</style><![endif]><![endif]-->
<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
img#yourimage{ display:none; }
div#alphaimage {
width: 222px;
height: 333px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='yourimageurl.png');
}
</style><![endif]><![endif]-->
img#yourimage{ display:none; }
div#alphaimage {
width: 222px;
height: 333px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='yourimageurl.png');
}
</style><![endif]><![endif]-->
<img id="yourimage" src="yourimageurl.png" />
<div id="alphaimage"></div>
<div id="alphaimage"></div>
Labels: Web Design
<< Home