10 CSS properties that ‘were’ impossible to implement in IE6

Personally I hate IE6, and never wanted to support it. Unfortunately, a percentage of internet users still use IE6. Sometimes even customers get insistent about how their page should look in IE6. Anyways, let’s hope IE dies soon!

This post is about 10 commonly used css properties that were impossible to implement in IE6. While redesigning ProductiveDreams, I came across a few css compatibility issues with IE6 and had to spend hours searching the solution for each issue.

So I just thought of putting them together to save your time. These css hacks (I would rather call them ‘solutions’ since, not all of them are purely css based) solves the major compatibility issues in IE6.

1. Rounded or Curved Corners

As you would know, all modern browsers support border radius. Curved corner is something that was merely impossible to achieve in IE6. Recently I came across an htc file (especially for IE) developed by Remiz from HTMLRemix.com, which solves this issue.

The first thing to do while using htc is to add the correct MIME type for htc behavior on your server. This is REALLY important before you proceed. The following are steps:

2. The popular PNG transparency issue

Every designer would have faced this issue, obviously! Though there are a number of javascript based solutions, I couldn’t find anything that supports background position. As far as I know all JS based solutions end up with the same result. This is something that worked flawlessly for me. All other solutions are based on this filter.

8. Bicubic scaling for images

One line code that solves the image scaling issue in IE6 and 7. Hats off to Chris Coyier for coming up with this solution.

img {
-ms-interpolation-mode: bicubic;
}

9. Negative text indent for input buttons

Negative text indent is normally used to hide the text value inside buttons, which lets you use custom background images for them. For some reason, IE doesn't support negative text indent for input buttons. For more details about this issue check out this post

10. Text shadow

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India.
Catch up with him on dribbble, Twitter and Facebook.

Don’t worry about how to write a css that works in all browsers.
Just change the URL of your website’s CSS a bit and everything works fine.
I know you don’t believe it, just give it a try. It’s totaly free!!

Declare your CSS commands on the highest level possible and try and declare something once only and let it cascade throughout. Only override the commands at a lower level when strictly necessary. This prevents a verbose CSS file that is difficult to maintain and understand.

hi, gopal m a newbee in css the all data are useful to me but i can still understand that why IE6 doesn’t support line height in a list & how to solve this problem, if u give the answer i will be highly thankful to you

IE6 is such a useless browser, most of css doesn’t work on it. I think we shouldn’t use IE 6 at all. These hacks will help a lot as still a lot of people are using IE6 but i donno why?
Great Post though.

your fixed position hack seems not work, even your example on /workshop/fixed_position vibrates here (mac parallels with xp and ie6). twi fixed items seem not to work at all (second item is scrolling up too). sad!!

Nice list, but unfortunately there are a lot of people like me who simply cannot help but use IE6 when their browser of choice is not compatible. For work, many of my company’s sites will not work with Firefox – this forces me back to IE6, as I would rather toss my machine out the window rather than upgrade IE. Actually, the same thing might happen in either case.

Double that IE-bashing and the hope for it to die a.s.a.p. but I dont see IE6&XP to go down anytime soon. Guess most people will sit on their cracked/non-updated XP/IE6 machines for at least 5 more years.

Good post highlighting ways to get IE to conform however I do question why you would want to use all those .htc hacks.
Use some of the more fancier CSS display methods including CSS3 and as long as the design still works in IE6 and all the site is visible then that will do. Ask yourself, do things really need hovers and rounded corners for a poorly supported browser. Progressive Enhancements using the latest CSS techniques allowing for graceful degradation in less than capable browsers such as IE6 would be a cleaner method and allow you not to be wasting time supporting all the foibles of ancient browsers.

Very cool. I tested all of them and about half of them did not work with IE6. The ones that did work were really good that i have wanted to find out how to do. Also just so you know I do not have IE6 installed on my computer i use this: http://www.xenocode.com/browsers/ it is programs you can start without having them installed. VERY VERY GOOD FOR WEB DEVELOPERS

I guess, you missed on issue, that is for Select elements. When you try to gray out the screen to display modal window, select elements pops above the gray out area. Basically Z-index issue.
Any solution?

There are a couple suggestions in here I take issue with. (But there is also some good stuff…

2. I’ll second Livia’s suggestion of DD_belatedPNG. It’s worked very well and is the best choice of PNG fixes out there.

4. Fixed position. CSS expressions are deprecated and have huge performance impacts. YUI Performance guidelines specifically recommend against using them. Stu Nichols of CssPlay has the best solution for position:fixed in IE6.

6. CssHover. This htc has huge performance costs and should be avoided. Most of the time you can a.nav { display:block} and use the a.nav:hover instead of forcing a hover on LI’s.

7. Min-height hack. I love this hack. It’s a keeper.

8. Bicubic scaling. This should be attributed to Scott Schiller of Flickr/Yahoo, but as he mentioned in the original article, it doesnt work in IE6. You need to use the nasty AlphaImageLoader if you want a similar effect there.

9. Negative indent on buttons. In my experience a line-height of something big (99px) is also required for input type=”submit” or similar elements.

10. Height:1% has some nasty consequences sometimes. It’s a bit cleaner to use zoom:1 to force hasLayout.

Grate list! I was in a need for some info about the fix positioning, thank you very much!
Still don;t get why microsoft doesn’t want to do something about IE6, but wtf. in some ways I am grateful, thanks to IE I learned how to swear, so thank you Microsoft, Thanks to you I can code and have fun in the same time!!!

Very nice list! I was already familiar with all of them, but it’s a good thing you’ve put ‘em all together in one place.

However, I’d like to suggest a better solution for transparent PNG, which supports both background-position and background-repeat: DD_belatedPNG by Drew Diller.
He also offers an alternative way for rounded corners, called DD_roundies, which is a JS library.
Both solutions are available here: http://www.dillerdesign.com/experiment/

@WebDev The trouble with upgrading for a lot of companies is that they have internal tools and intranets which were built to work in IE6. They can’t upgrade without having to replace those which can get pretty expensive.