IE6 – Oh IE6… Why Must We Live With You?
Posted Saturday, July 11th, 2009Well we all know IE6 is poo, that’s just a given. So we wont get into any sort of rants about ‘don’t we have enough browsers to test on?‘, ‘it’s not even supported anymore‘ or discuss such things as phasing out, browsers comparisons, percentages etc etc. It has been done to death… Although saying that, for those of you viewing this site in IE6, Cough… Firefox, Safari, Chrome, Opera or, to be fair even this would probably work better.
I have no doubt in my mind that what the digital revolution is doing for television, one day common sense will do for internet browsing and we will be rid of it forever, but until that day comes, we must live with IE6. So with that painful recognition, I thought I would put together and share a few common IE6 bugs, along with some helpful hints and tips to combat this crummy browser!
First, some advice
We can of course before we get into any bugs and fixes, help ourselves along by making sure all our code is built using semantic markup which validates and works in modern browsers. Never build your site for the older browsers first, always build for the newer ones then apply fixes for the older ones. This means you are future proofing your site. Also make sure a valid doctype is declared. If you do these things then you may not experience any bugs or issues. If you do come across a bug, fix it when you discover it as it is much easier to handle than trying to fix a boat load at the end of a project.
A handy CSS tip!
One trick I use regularly is the ‘* html‘ rule. This rule is ignored by all browsers other than IE6, allowing us to apply specific rules and styles for IE6 problem areas. This code in use could look something like:
p{
font-size:14px;
color:#fff;
}
* html p{
font-size:12px;
color:#000;
}
Using the above example, the font would be 14px and white in all modern browsers, but in IE6 it would display at 12px and be black. I sometimes use this rule to overcome some of the specific bugs highlighted below, also as a light weight alternative to replace pngs with gifs in IE6 instead of using the iepngfix.htc PNG fix which we will cover shortly.
The Double Margin Bug
Lets say we have an element on our page, a div for example. We need this div to be 500px wide and want to float it right with a margin-right of 10px. The CSS for this would look like:
div {
width: 500px;
float: right;
margin-right: 10px;
}
IE6, due to it being a genius browser will double the margin, so instead of 10px it makes it 20px. Marvelous!
Solutions:
1. You can set the element to have the property ‘display: inline;‘ which immediately remedies the issue, but this causes an element which does not have a float property attached to lose its static width. So this is not always a viable option.
2. Do not add margin-right to your element, but instead add padding-right. Again not always suitable as you may have a border or different background colour applied to your element.
3. Remove padding and margin all together from the element, and instead add a padding to the elements parent.
4. The * html fix mentioned above!
None ideal, but no bug fix is!
The Box Model
The Box Model is quite an annoying and very common IE6 bug and it involves a miscalculation of any element with a declared width. Your code could look something like:
div {
width: 500px;
padding: 20px;
}
IE6 calculates the width of the div to be 500px, whereas modern browsers will calculate the width of the div as 540px incorporating the 40px padding.
The solution:
The answer to this problem is to not add padding to the outer element, but instead embed an element, perhaps a ‘p’ tag or another div inside the parent div, and add your padding to this element instead. Creating:
div {
width: 500px;
}
div div {
padding: 20px;
}
The Stepdown Bug
This is an issue commonly found when creating elements like horizontal menus. It is caused by IE6 adding a line break after the floated element, which in turn knocks the next floated element down a line and so on.
The solution
There are two ways around this problem.
1. Set the elements that are floated, lets say the ‘li’ in a list to be ‘display:inline’, then display the embedded element as ‘display:block;’ An example of this would be:
ul li{
display:inline;
}
ul li a{
display:block;
}
This allows us to remove the float property from the parent element, in turn removing the bug.
2. You can set the parent elements line-height to 0 causing the break to attain 0 height.
None Collapsable Elements
This is quite an annoying little bug, if you are trying to set an element with a 1px or 2px height property, IE6 ignores this and will not collapse the element down further than the height of the base font-size.
The solution
Simple solution to this one, we just need to add ‘overflow: hidden;‘ onto the element in question. This then ignores the height of the font in IE6 and sets the height of the element accordingly. Example:
div {
width: 400px;
height: 1px;
overflow: hidden;
}
No Hover States
In modern web design, we like interaction, meaning we try to add hover states to more things than just links. Most modern browsers support hover states on elements such as ‘li‘ ‘inputs‘ etc, but not IE6.
You can only have a hover state on an ‘a‘ element and it must include an ‘href‘.
The solution
Unfortunately the only solution to this problem is using a JavaScript fix, something similar to this, or you will just have to live with your users experiencing less interaction on IE6.
Alpha Transparency PNG
IE6 does not support transparent images, and it was only until IE7 was introduced did Microsoft decide to say, OK we will allow people to have pretty websites! Not a quote! Yes if you try to include a nice transparent png image on your website, IE6 will throw in a lovely Grey coloured background for you.
The solution
There are again a few workarounds to this issue.
1. Use the * html fix I highlighted above to specifically add a gif instead of a png image to your site. This does mean creating 2 images every time you want to use a png but it is very flexible and allows you to keep your code clean. something like the following would work:
div{
background-image: url('images/BG-image.png');
}
* html div{
background-image: url('images/BG-image.gif');
}
2. You can use a iepngfix.htc. This works by cleverly replacing the background with a blank 1px x 1px gif image. There are many different versions of this file, some only work with inline images, some can handle background images. The one I turn to can be downloaded here. It is simple to implement and contains instructions on use.
To Conclude
These are just some of the bugs we as web designers need to face when dealing with IE6, and these are some of the ways I deal with them. Not all are the best way, but they seem to work! If anyone has any preferred and tested methods covering some of the issues above, please feel free to post them below.
Posted Saturday, Jun 5th, 10
July 11th, 2009 at 9:01 pm
[...] See more here: IE6 – Oh IE6… Why Must We Live With You? [...]
July 11th, 2009 at 9:03 pm
[...] View original here: IE6 – Oh IE6… Why Must We Live With You? [...]
July 12th, 2009 at 4:43 am
[...] Read more: IE6 – Oh IE6… Why Must We Live With You? [...]
July 12th, 2009 at 4:43 am
[...] Read more from the original source: IE6 – Oh IE6… Why Must We Live With You? [...]
July 13th, 2009 at 9:49 am
The best thing to do against IE, dont make IE arrangements. By this way when a visitor visit the page via IE and the site doesn’t look normal crushing divs in everywhere then the visitor try to find a solution at least he or she find the great Firefox ta-daaaa :) IE death day by day
July 13th, 2009 at 3:55 pm
Love the design .. thanks for the nice article.
July 13th, 2009 at 4:19 pm
Nice post. I am on the side of “facilitating our code” to IE6, because you are only going to lose customers if your website doesn’t display correctly. Most “non-web” type won’t understand the reasons why your site doesn’t look correct in their browser, so I figure you might as well add the IE6 workarounds if needed.
Once you get used to them, and are experienced with the IE6 css issues, you will be able to put them in as you code, rather than waiting to taste in IE6 and finding it all misaligned….so with that in mind, this is a helpful post.
For a png fix, I like the Google solution (just have to name all png images to end with a “trans”)
Thanks for the post
July 13th, 2009 at 4:20 pm
@Ekin Ertaç – unfortunately the biggest problem with IE6 users is not the user themselves but the company (schools, government buildings etc as well) that they work for. Many large companies can’t afford to upgrade (not a money problem though; time) or simply cannot risk a massive IT meltdown when their floppy-disc-old account management programs that use IE6 cease to work – for example.
Many users on IE6 simply lack the power to make a difference – at the end of the day to many of them “it is just the internet” after all and what they have been given is the end of that world.
Personally I absolutely hate IE6 and stand fully united with the design community in its death march but it seems no matter how hard we push some people and companies will not budge (or just don’t care).
July 13th, 2009 at 4:22 pm
oops, the code I pasted didn’t show up. This is the google solution:
In the header, put hack “if browser lower than ie8″ use this JS….
http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js
July 14th, 2009 at 6:00 am
Nice article!
You forgot to say that sometimes (nobody knows why) in differens situations “display: relative” helps without any reason to help )
July 14th, 2009 at 6:04 am
Oops, I meant “position: relative”
July 14th, 2009 at 8:52 pm
Luckily, it looks like we don’t have to live with IE6 much longer. If Digg and YouTube are getting rid of IE6 support, why shouldn’t the rest of us follow suit and forget the outdated browser? Soon enough, everyone will need to get on the bandwagon and either update IE or switch to a different browser.
http://www.techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/
July 16th, 2009 at 5:43 pm
Ah IE6 a little bugger, I’m currently building two sites and tada!! the clients use ie6.
Sometimes its just as easy to add a spacer div in to fix margin issues, its dirty but it works every time. Obviously with careful design planning you can get away with using minimal margin settings.
Weirdly enough if you put a wrap around certain objects it also fixes the issue.
Anyhoo are you still on free virtual servers for your own hosting – I’m on free-space.net (its free) and well all I can say my site is about 50/50 up and down, if you’ve moved where have you moved too? and how about a hint at your new domain name re-branded09.com??
July 21st, 2009 at 1:55 am
IE6 had completed its mission. Thanks for your great tricks.
July 22nd, 2009 at 3:56 pm
I can stand it. The amount of time that we need to waste just to handle these errors is absurd. I talked about the frustration myself:
http://www.tarekshalaby.com/2009/06/when-will-ie6-come-to-an-end/
I think the users need to become more aware. It is no longer forgivable, even for older, technologically-incompetent users, to use IE6, not understand why it’s so bad, and not care.
Together, we can completely destroy IE6 and pretend it never existed! Good post, thanks a lot.
July 23rd, 2009 at 12:59 am
Ah… IE6, what a royal pain in the arse!
I still can’t believe, after all these years, that we still need to apply hacks and fixes for this archaic browser!
Nice article though, Rob!
July 23rd, 2009 at 12:14 pm
How about we just destroy all IE browsers, Microsoft obviously don’t give a flying monkeys and just turn out buggy software.
July 23rd, 2009 at 4:19 pm
My employer (with 250,000 employees) locks down our desktop and insists we use IE6! it’s horrendous, but we have to live with it. Thank goodness you are still thinking of us! :)
July 30th, 2009 at 4:23 pm
Nice article! However, you are incorrect about the effects of using “display: inline;” on floated elements. This does indeed fix the IE6 double margin bug, but it does not cause the element to loose its static width.
You can reference the following article:
http://www.positioniseverything.net/explorer/doubled-margin.html
July 30th, 2009 at 4:31 pm
Hi Mike
You are correct, if the element is set to be floated it does not lose its static width when the display property is set to ‘inline’, whereas if you have an un-floated element, then changing the display property from ‘block’ to ‘inline’ will in-fact remove the static width set.
I will edit the post now to reflect this. Thanks again for pointing it out.
Rob.
August 5th, 2009 at 3:43 pm
For a year or so I’ve been a staunch protested against IE6, jumping on the bandwagon. But it appears these “movements” to boycott and rid the (online) world of IE6 is doing nothing. Then I had a thought.
I’m an avid PlayStation 2 player. For those of you in the know, the PS2 was launched in 2000 and I got mine just under a year later. Therefore, the PS2 outdates IE6. However, despite people telling me I should get a PS3 or another console, I don’t want to, the reason being I’m happy with my PS2 and don’t have the time to play on a PS3 that would do it justice.
I believe people, particularly older surfers, are in the same position as me. They browse the web every now and again. IE6 suffices for their browsing needs and therefore they don’t have a need to upgrade. And then you get the usual corporations who are using outdated systems and holding back from updating because it’s costly.
That’s my new outlook on IE6. I would love to hear people’s comments, although I don’t mean to do so at the expense of Rob’s blog!
August 7th, 2009 at 3:13 pm
Interesting theory Mr. Bean, you could look at it that way, but you must remember PS2 games are designed for the PS2. IE6 requires the web designer to adjust their code to allow lazy halfwits to view their site, because they can’t be bothered to upgrade their browser.
If you choose to play PS2 your making the choice and loving it, if someone uses IE6 complains because they can see your site properly they expect you to fix it.
It in example would be you buying a PS3 game and demand the developer change it to work on your PS2.
August 7th, 2009 at 6:34 pm
@ Paul, The problem with your point is the large corporations (as nik pointed out above, some with 250,000 employees +) who are all using IE6, due to restrictive access simply cannot upgrade. Also with companies of this magnitude, there is a very large cost implication, not cost for upgrading the browser but cost for employing a company to come in and do the upgrade for them, while keeping everything running smoothly.
What we have to remember here is we strive to make sure our sites are cross browser checked, but we don’t ‘have’ to.
Take Branded07, especially as it is a portfolio site I could quite happily say, ‘OK, I am no longer going to test on IE6′ And I would not be breaking any rules or guidelines as my code would still be classed as accessible.
It is more of a choice thing than anything, especially if your client is using IE6.
I visit this link regularly, The W3C Schools Browser stats. It highlights global browser usage statistics. You can see that the users of IE6 have been dropping quite consistently every since IE7 was introduced. But this is still at 14.4% of our browsing market.
So the main question is, at this point in time, do we ‘want’ to stop catering for IE6 users. Because I for one do not think it is quite the right time, not yet at least…
August 7th, 2009 at 6:45 pm
Oh and @Martin, take a look at that link on the Firefox usage! It is happening! Slowly but surely.
August 8th, 2009 at 7:13 pm
[...] Read more: E6 – Oh IE6… Why Must We Live With You? · Branded07 [...]
August 9th, 2009 at 12:01 am
Rob, don’t get me wrong – I actually agree with you. We choose to make our sites work in IE6 because we care that the site is going to look beautiful in every browser. A lot of web developers don’t give a monkeys, but these tend to be the ones in it for the money. But hey just wait till google bring out their operating system and have their own browser, another one to test on, oh wonderful times.
August 13th, 2009 at 1:26 am
Better idea: stop supporting IE6. IE8 is available now. IE6 no longer has my support. In fact, I won’t even bother testing on IE7. Update. I write very standards-compliant code. If a browser doesn’t render it right, that user needs a new browser.
You are part of the problem, actually. The more tricks you provide to make sites work right in IE6, the less reason people who use IE6 have to upgrade… sites still work, don’t they? People don’t care about what’s better, they want what sucks less. If IE6 continues to not suck, nobody needs to upgrade. But when IE6 is obviously a detraction from the experience of using a site, then maybe the user will use Windows Update and discover there are two newer versions available.
August 13th, 2009 at 6:58 am
[...] Blogger. [...]
August 13th, 2009 at 1:15 pm
Good article, but IE6 does support PNG8 so there’s no need for GIF.
I believe we don’t need to have these “hack” code, just make sure it’s downgrade style alright. This way, less code, more efficient, quicker, less bandwidth being used.
August 13th, 2009 at 4:33 pm
I actually don’t agree with Dave’s comment , its more to do with pride, we fix our sites to work in IE6 because the little voice in the back of our heads tells use it doesn’t look beautiful so fix it. If we didn’t care we could all just stick in a bit of code to detect the browser and tell the user to upgrade.
August 14th, 2009 at 5:25 am
IE 6 sucks and it cannot die quickly enough . It’s beyond crap and a waste of time .Yes the losers that developed it . shouldn’t have . I won’t support it , ever.
August 15th, 2009 at 8:01 am
The IEBlog addressed this issue on August 10, 2009:
Engineering POV: IE6 http://blogs.msdn.com/ie/archive/2009/08/10/engineering-pov-ie6.aspx
From this post:
“…We can of course before we get into any bugs and fixes, help ourselves along by making sure all our code is built using semantic markup which validates and works in modern browsers….”
I agree with this. The migration from IE6, to IE7 and now IE8 has not affected sites built with standards compliant coding. The problem with moving forward in the evalution of IE is people using hacks. As time has gone on, IE has become more and more standards compliant.
August 15th, 2009 at 9:24 pm
IE is going to be here a while. We better get used to that smell. http://www.ie6death.com/
August 15th, 2009 at 9:25 pm
IE6 is going to be here for a while. http://www.ie6death.com/ We better get used to that smell.
August 16th, 2009 at 9:03 pm
Haha! I’ve already given up designing for IE6! I tell my clients that its old, buggy, and too expensive to design for, and also that it doesn’t have much market share anymore. Heck, it’s 8+ years old.
August 24th, 2009 at 3:38 pm
We hate IE6, like a developers we have day by day clients with IE6.It is the worst browser ever.We love mozilla:)
September 7th, 2009 at 6:25 am
@Rob
Please correct the fact that The W3C Schools Browser stats are not global stats. These are global stats of w3schools.com whose most visitors are technically savvy people. It also shows that about half of its visitors use Firefox which is not true for general public.
For general public IE6 usage could be way higher than 14.4%.
September 7th, 2009 at 6:56 am
@Ejaz
You are correct, these stats are not ‘Global’ usage stats. I think my wording was slightly incorrect on that comment. What I was trying to highlight was trending really.
Although your statement of “For general public IE6 usage could be way higher than 14.4%.” may not be completely true either.
Of course if you take a census only taking into account say the over 50s or closed off businesses then maybe IE6 usage will be higher. It depends of course on your demographic.
I don’t think you will notice a massive difference on “the general public” for IE6, as the W3C state, The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Which is true, but this is no longer IE6. You will find they are using IE7 or IE8 now a days.
Anyway good catch and thanks for pointing it out.
September 7th, 2009 at 8:40 pm
I am sure that as long as webdevelopers continue to support IE6, by using time and resources on making our websites available to them, people will continue using IE6.
September 8th, 2009 at 12:16 am
I found this to be a very interesting article. I’m not a big fan of IE6 and it still surprises me that I come across people that think that they have no choice but to use this browser.
Regards,
Karl
September 8th, 2009 at 1:45 pm
good stuff
September 9th, 2009 at 4:44 pm
Excelente aporte esa es la informacion que se debe dar a conocer para acabar o obligar a microsoft a apegarse a los estandares mundiales y no a los suyos jajajajaj Viva FireFox!!
September 10th, 2009 at 6:46 pm
Hi rob, I’m Richard, a web designer from Argentina and I congratulate you for the portfolio and all the post, that is astounding.
September 16th, 2009 at 7:14 am
At this point I *usually* code around IE 6 bugs instinctively, but it’s always nice to look at clean solutions for them. Thanks.
Regarding usage, I know plenty of people under 40 who think IE 6 is the only way available to browse the web. Maybe that speaks to how we designers need to nudge/educate users to upgrade.
On top of that, I know that here in Washington State, some government departments can not upgrade their browsers at all due to the requirements of some arcane intranet app that some idiot built for them. Horrifying but true.
September 25th, 2009 at 7:22 pm
IE6 is by FAR the most annoying browser to code for. What makes it worse is that 30-40% of my readers STILL RUN IT!
Thanks for the info though, as I’ll probably be referring to this page more than once.
September 27th, 2009 at 3:28 am
Goggle Chrome Frame can be installed within IE and makes a DRASTIC change in its performance.
October 7th, 2009 at 6:20 am
The star hack is not for IE6, it is for IE7. The underscore hack (_) is for IE6. You might want to fix that up in your article. Otherwise, nice write up, but nothing new that hasn’t already been said on Sitepoint.com
October 7th, 2009 at 7:47 am
Hi Beat Smith, you are a little mistaken I think, but I also like being proved wrong and learning as I go! I think though on this occasion what has been written is correct, the confusion may be because I haven’t covered the IE7 star rule which is applied to a css element, instead I have covered the full class star rule:
* html .box /* IE6 */ {background: red;
}
The star rule highlighted above does in fact effect IE6, what you are referring to is the star hack when the star is placed on the element itself, like so:
.box {background: red; /* normal browsers */
*background: blue; /* IE 6 and 7 */
_background: green; /* IE6 */
}
Rob
October 9th, 2009 at 8:34 am
Nice article. I usually choose to ignore IE6 issues wherever possible. As a web application developer who is also coding the front-end, I find it really irritating when I have to waste time making divs position correctly in IE6 when I could be adding useful functionality to the app.
Luckily for me, the client of my current project — which will only be accessible for his organization — agreed easily enough when I suggested that he switch to Firefox. But this won’t be an option for an app that is accessible to everyone.
October 19th, 2009 at 9:14 am
Good article ! With PNGs, I usually try to avoid scripts, there are other possibilities like using PNG8 as mentionned above, or thanks to a little software (TweakPNG), you can set a default background color to your PNGs and this color will be displayed only when transparency is not supported (IE6 for example).
November 13th, 2009 at 5:36 pm
The more web developers that simply stop supporting IE6 the quicker it will die.
I have not coded or tested for IE6 in a year. FF gained the #2 position behind that of IE7 and I haven’t looked back. I work for a government agency and the office switched everything to IE7 last year. I create PNGs for images. My boss uses Chrome. Life ain’t perfect – but it’s much better than it was 2 years ago – patching fixes for IE6.
I do not have any software version on my computer at work or at home that was not created in the past 2 years.
Web Browsers are FREE Applications! It’s not like you have to pay money for IE7. Everyone talks up less security issues/ better security protection with current applications – why then are folks still hanging onto IE6?
December 16th, 2009 at 4:44 pm
Ahh , hate ie6 .. why is it still available ?
December 18th, 2009 at 4:31 pm
E6 – Oh IE6… Why Must We Live With You?…
Fixes to common Internet Explorer 6 bugs. Using CSS tricks and tips. Dealing with The Double Margin Bug, The Box Model and The Stepdown….
December 25th, 2009 at 4:03 am
科士威
January 13th, 2010 at 6:03 am
I love the design of your blog and great post, it’s very helpful to me. IE6 is always my problem..
January 21st, 2010 at 10:52 am
It’s really helpful to me. There is a .png fix called supersleight.js. What do u say about it?
February 17th, 2010 at 3:41 pm
I have already decided to put the past aside and move on with the future. IE6 is in that past and if you still decide to aim at its users, no problem – as long as you inevitably know that it will get to a time where you will have to move on.
I sort my IE6 issues by simply putting a notification at the top, urging the users to upgrade their browser due to compatibility issues.
Better still a simple google search lead me to a smart guy named Dean Edwards, who released a script that makes IE6 act like its IE7, fixing common issues including the png24 transparency bug that even Microsoft’s css solution doesnt fix.
February 17th, 2010 at 4:23 pm
You can get Dean Edward’s script from these locations,
http://code.google.com/p/ie7-js/
http://dean.edwards.name/IE7/
April 19th, 2010 at 12:28 am
I’m a webdesigner and stopped giving support to IE6 simply because its to old and people who doesn’t want to move on are simply ignored. Since microsoft will stop giving support to IE6 and tho is already starting to skip windows xp. I don’t see why we all should do this trouble for IE6.
But i think thats the choice of how the designer looks at it and what they want. i made my choice and i stopped with IE6 with CSS3 and HTML5 it will only get worse!.
Greetz
June 7th, 2010 at 1:35 pm
If you use right doctype (html4 strict or xhtml) box model will be like in other browsers. But, to be honest, I like «wrong» box model, unfortunately, it cannot be used with standart doctype.
June 21st, 2010 at 1:34 pm
IE is bad wall for web2 design progress
IE always have bugs in css and java and make design harder. every version of IE need special IF !!! this is stupid ! I dont know why microsoft dont stop this project.
Designers should create online campian for Hate IE and some frieldly script and logo for block IE for users . hope for stop this project from microsoft