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!