by Cedric Dugas on April 6, 2009
At some point in the internet evolution, IE6 was the Golden Grail of browsers. Big CSS support, new features, it had everything. That was 10 years ago, in a time where the words “web standards” meant the same thing as go fu** yourself. Unfortunately, Microsoft didn’t have to update it, IE6 competitors were practically nonexistent or not worth bothering.
Now IE6 is a pain in the ass. I will try to give you tips that will relieve your pain.
1. IE6 double margin bug when using float property on a div
Ahh this is one of the most common bug, but also the easiest to correct. If you use margins on a floated DIV , most of the time (yeah not always, weird..) it will double your margin value. The solution is simple. Add display:inline property. It will correct it, i don’t know why, don’t ask me, it just works and it doesn’t change anything else.
2. Height:100% on a position absolute div do not work.
IE6 is kind of dumb, you need to tell a lot of informations to make it work. In this case, It will not understand the 100% because it’s parent don’t have an height property, 100% of what ??? You need to add a fixed height to it’s parent.
If you want to have 100% of your body you need to add height:100% on your html and body elements.
3. PNG have no transparancy
PNG… 10 years ago png was not really known, or was not used in a good way. Microsoft had later implemented a CSS patch only understood by IE to correct this problem:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);
4. In my floated 2 or 3 columns website, sometimes one column just move under my other columns instead of staying aside.
A somewhat common problem too, even if you code a width on your floated column in IE6, it WILL expand to the largest item in this column. If you have a div, an input or anything larger than your column width, it will probably move under the other columns. Look inside your column for a larger element than your column width and correct it.
5. Ie6 render a double of my last item list(<li>) outside of my <ul>, WTF????
Yeah a weird bug that happens sometimes… Add a html comment like <!– IE6 suck –> at the end of your list and your double item will magically disappear.
6. My list bullets are not aligned with my text
This happen when you have a top padding on your list element (<li>, etc..), put a top margin instead and you should be good. This is a IE7 bug too by the way.
Here you go!