6
CSS for IE6, 6 common problems and fast ways to fix them
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!
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
28 Comments to “CSS for IE6, 6 common problems and fast ways to fix them”
Leave a comment
Articles
Some Tweets
- kind of old, bit I like it http://www.thereisnopagefold.com/
- I really have a love/hate relationship with the E texteditor, so good but so bad at the same time
- onclick on a form instead of submit? Please never do javascript again
- Question: do you think the mobile web has a viable market right more? Pretty hard to convince clients to invest
- I meant jquery mobile.. meh
- Looks like sencha touch will have competition, jquery touch is looking hot!
I would add the 3px gap bug with the overflow: hidden solution to the list.
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!
Let’s forget about IE6, it’s past.
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.
You certainly got some good tips there Anthony
i vote for peekaboo. the most time consuming bug EVAR!
For the peekaboo bug, I float alot and css clear both, enough so this bug happen to me really rarely.
another way
http://www.stopie6.org/
http://www.savethedevelopers.org/
Love it!
Great list, thanks!
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.
IE 6 i outdated.. people with that browser should seriously upgrade before they get hacked, its full of security holes..
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.
test
Great article! Thanks for taking the time to explain solutions.
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 “ ” . 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.
For PNG transparency, I can also recommend DD_belatedPNG:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
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!
people’s are forgot about IE6 but developers simply wasting the time by discussing about IE related issues…
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.
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?!!
[...] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them [...]
[...] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them [...]
nice article
[...] 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 [...]
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 .
[...] CSS For IE6: 6 Common Problems And Fast Ways To Fix Them [...]