CSS for IE6, 6 common problems and fast ways to fix them

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:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);

There is also some javascript that can correct this problem automatically, if you chose to go that way, I recommend this one.

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!



41 comments

I would add the 3px gap bug with the overflow: hidden solution to the list.

by Manu on September 16, 2008 at 11:36 pm. #

Awesome! Thanks so much for these tips. How long I’ve been struggling with the double margin and annoyed about lack of an easy way to implement PNG transparency without JS. Thanks again!

by Leon on September 16, 2008 at 11:54 pm. #

Let’s forget about IE6, it’s past. 😉

by ZerroQ on September 17, 2008 at 1:50 am. #

There’s some tips there I didn’t know about. I wrote a similar post a couple months ago – http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/

There’s always some bugs you don’t know about with IE6, so posts like this are handy. Thanks.

by Anthony Short on September 17, 2008 at 7:07 pm. #

You certainly got some good tips there Anthony

by Cedric Dugas on September 17, 2008 at 9:30 pm. #

i vote for peekaboo. the most time consuming bug EVAR!

by micha on September 18, 2008 at 1:11 pm. #

For the peekaboo bug, I float alot and css clear both, enough so this bug happen to me really rarely.

by Cedric Dugas on September 18, 2008 at 1:15 pm. #

another way 😉

http://www.stopie6.org/
http://www.savethedevelopers.org/

by binocle on September 19, 2008 at 2:04 am. #

Love it! :-)

by Joe on September 19, 2008 at 5:25 am. #

Great list, thanks!

by Tiff on September 19, 2008 at 8:52 am. #

Great tips and a nice check-off list for those of us who sometimes forget to fire up that one old PC that still has IE6 on it.

by Heather on September 19, 2008 at 10:31 am. #

IE 6 i outdated.. people with that browser should seriously upgrade before they get hacked, its full of security holes..

by Jimmy Rittenborg on September 20, 2008 at 3:16 am. #

As about No.2: I managed to fix it by adding

style=”position: relative; height: auto !important; height: 1px;”

to the containing element. First declaration works for all normal browsers overriding lame height in the second one. IE ignores “!important” and takes a fixed value from the second declaration. Then it has to correct it by a real content height and to store it, thus enabling “height: 100%” in contained absolute div.

by void on November 19, 2008 at 5:02 am. #

test

by admin on May 4, 2009 at 8:49 pm. #

Great article! Thanks for taking the time to explain solutions.

by Balaji on May 28, 2009 at 2:51 pm. #

Hi,

I have this problem > 5. Ie6 render a double of my last item list() outside of my , WTF????, But in simple div tag i have faced this issue many i have keeped or “&nbsp” . it work some time but in my last project i was unable to solve that issue. I have tryed all every thing which was possible but nothing solved the issue.

by Mikul Gohil on June 19, 2009 at 8:12 am. #

For PNG transparency, I can also recommend DD_belatedPNG:
http://www.dillerdesign.com/experiment/DD_belatedPNG/

by Thany on June 26, 2009 at 4:07 pm. #

I have a great idea. All those in the web design/dev arena decide on a date when we all stop using ie6. It will be a unified push to get rid of the enemy. I think we have pandered to its oppresive regine far too long, lets stand up for “ie must die day”, spread the word!

by Tetsui on July 21, 2009 at 6:43 am. #

people’s are forgot about IE6 but developers simply wasting the time by discussing about IE related issues…

by Naushad on November 18, 2009 at 3:19 am. #

30-40% of people use IE6.0 and you lost they if your website dont support IE6.0 you can check stats of your website in browser section.

by Mehdi Ahmadi on November 19, 2009 at 9:08 am. #

I’ve maid a perfect template for my joomla website and it has no problem with any browser but IE6 is fu**in’ me!
boss of the company that I’m designing the site for, uses IE6!!!
so what would you do if you were me?!!

by Farid Rn on November 24, 2009 at 11:13 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by [译]IE6终极备忘单:修复IE6下 25+ Bugs - vfresh on January 17, 2010 at 9:42 pm. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6终极备忘:修复IE6下 25+ Bugs(转) « 前端工作室(We are UEDs,专注于前端开发和用户体验设计) on February 3, 2010 at 1:57 am. #

nice article

by balaji on February 18, 2010 at 1:55 am. #

[…] The Definitive Guide to Taming the IE6 Beast # IE6 Peekaboo Bug # hasLayout.net # CSS For IE6: 6 Common Problems And Fast Ways To Fix Them # Explorer Exposed! # The Death of IE6 # 10 Fixes for IE6 Problems # http://pmob.co.uk/ # IE6 Bug […]

by [HTML/CSS] IE6 スタイルシート: 25のIE6の修正 / IE6のバグ | Bonnie styles. on February 24, 2010 at 8:06 am. #










by sursilmutt on June 20, 2010 at 4:57 pm. #

For PNG have no transparancy back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”); instead of this u can use preset as PNG-24 in photoshope while u slice it .

by Suresh on June 24, 2010 at 8:51 pm. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by [译]IE6终极备忘单:修复IE6下 25+ Bugs | 艺创科技 on August 26, 2010 at 8:47 pm. #

Thanks, that’s useful!

by Youngstream on September 25, 2010 at 2:27 am. #

Ah thank you! I’ve always fiddled way to much to clear the doubling of the margins. It is so unpredictable and a lot of my previous fixes weren’t ideal.

ps. I work with images disabled (don’t ask) and your add comment button doesn’t show. Accessibility people…

pps. Thanks again.

by Big Col on October 23, 2010 at 6:28 am. #

thanks for sharing, very useful tutorial
you save my time :)

by WasteYourTime4us on October 28, 2010 at 9:14 pm. #

What is UniqueHoodia?

— is a cactus-like plant that comes from the Kalahari Desert and has been used for hundreds of years for its well noted appetite suppressant qualities. This unusual plant has been a staple diet of the Sans tribesman to keep them going without very little food for several days and even weeks on long, labourious treks and hunting trips. The astonishing weight loss properties of this very exceptional cacti has now came to light and UniqueHoodia was launched.
UniqueHoodia (–) is one of many diet supplements that choose to ultilise Hoodia Gordonii as the chief ingredient to help the user eat less food and calories and therefore, lose weight. What makes UniqueHoodia head and shoulders above the rest is that it uses totally un-tainted Hoodia Gordonii, so you can be sure that you’re getting the real thing and not a poor copy and that you are investing in a product that in actual fact does work.

UniqueHoodia (–) will safely and effectively suppress your appetite, meaning that you will eat fewer calories and get a huge reduction in body fat. This makes UniqueHoodia a particularly helpful solution for those who go too far and consume too much of the wrong foods, for example; fatty, high calorific, starchy foods. The remarkable benefits of this plant will let you to eat a considerably lesser amount and hence, start to burn fat and lose unwanted fat!

Many retailers claim that their diet pills are also made from the loved Hoodia Gordonii (–) plant but this is very misleading. More often than not they are not producedfrom the genuine Gordonii plant itself but from another Hoodia variety, it is all too easy to trick the buyer by claiming one’s product is produced from ‘Hoodia.’ If any Hoodia does get in the product It is likely to contain such an insignificant amount that it is unlikely to have any real effect on your weight whatsoever.
With UniqueHoodia, you will get 460 mg of Hoodia Gordonii in its pure and natural form. This is just the proper amount to eradicate 2,000 calories from your diet which could enable you to lose between 1lb – 5lb a week. Since UniqueHoodia is coming straight from the plant, there is no need toquestion the safety of the product, there are no fillers, binders or hidden extras, meaning absolutely no side effects just a fantastic weight loss result. (–)

UniqueHoodia is a very cost effective solution to your weight loss problems, you get 30 more supplements than what is offered with more inferior Hoodia preparations at a truly reasonable price. In addition you have an iron clad 6 month money back promise which means you can have utter faith in UniqueHoodia, unlike other competitors on the market you can feel in no doubt that the manufacturers have so much faith in their product that you will lose weight and attain the body of your dreams all at no risk and low cost. Do not wait, experience the marvel of UniqueHoodia for yourselves straight away. (–)

by argupsinsuppy on November 19, 2010 at 11:13 pm. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6: Everything You Need to Know on February 25, 2011 at 1:10 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs | Jim的blog on April 27, 2011 at 8:04 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6终极备忘:修复IE6下 25+ Bugs | levi on May 16, 2011 at 2:31 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6 커닝 페이퍼: IE6 버그 25+ 해결하는 방법 | Clearboth on July 13, 2011 at 11:43 pm. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs - blog.topwebdevelop.com on September 15, 2011 at 9:54 pm. #

Are you a developer ? Get out from ie6 head aches. Show ie6 upgrade warning message in your website. Just past following code in body section of your website.

by ie6 update javascript code on October 4, 2011 at 5:36 am. #

visit http://cybrosoft.com/ie6/ for the code

by ie6 update javascript code on October 4, 2011 at 5:39 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6终极备忘:修复IE6下 25+ Bugs at 乱炖 on October 7, 2011 at 1:42 am. #

[…] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them […]

by IE6: The ultimate terror « Web User Experience on February 18, 2012 at 12:10 pm. #