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

10-css-properties-were-imposible-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!

10 IE6 CSS Hacks

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:

1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server

For more details on how to add MIME type visit Microsoft Support

All you need to do is download the htc from HTMLremix and include the following code in your CSS.


.div_class_name{
behavior:url(border-radius.htc);
}

Jquery Alternative: jQuery Corner a jQuery plugin that creates crossbrowser compatible rounded corners!

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.


.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}

HTC Alternative:If the solution above doesn’t work for you, you may try this htc alternate.

Known Issues:
1. Doesn’t support CSS Sprites: If you are using sprites, then just forget this hack. Background positions doesn’t work with PNG hacks .

If you need background-position support for PNG, then go for DD_belated

The best solution is to use a .gif or png-8. Check out the best way to do this without using hacks!

3. Opacity

This is pretty much straight forward and easy to achieve compared to the other hacks.


.opacity_div {
filter: alpha(opacity = 50);
}

4. Fixed position

All browsers support the css property ‘position:fixed’, but not IE6. I had to find a solution for this since the social icons in this blog are having a fixed position.


* html .fixed_div{
position: absolute; /* position fixed for IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

Just change the top(104) and left(15) values, to position the element.

This method works very well, but you would notice a jerk while scrolling the page. So here goes a fix for that.


* html {
background-image: url(image.jpg);
}

All you need is a 1px x 1px image. This might sound weird but it works!

5. Min-width & Max-width

This is simple as well and was already posted on ProductiveDreams

Min-width:

.div_class_name{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}

Max-width:

.div_class_name{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}

Jquery Alternative: This is an alternative solution for the hack above. JQminmax is a cool plugin which allows you to set minimum and maximum values for both width and height.

6. Hover for non anchor elements

Unfortunately, IE6 supports :hover, only for anchor tags. That means css based dropdowns would not work in IE6. CSShover.htc is the best solution for this. You may download the htc file from xs4all.nl


body {
behavior: url("csshover3.htc");
}

As I mentioned previously, don't forget to add the correct MIME type for htc behavior on your server. This is the key.

7. Min-height & Max-height

Minimum height:

This is not really a hack since it uses valid css.


.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

Maximum height:

.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}

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


input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

10. Text shadow

The shadow filter is one of the useful filters for IE.


.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}

About Gopal Raju

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Excellent issues and Solutions.
    Thanks A Lot.

  2. For IE6 fixed position does not work properly, it flickers whiled scrolling. any solution for that? thanks

  3. a lot of good and usefull tips, we will them, thanks for sharing

  4. Thank you. This is a really helpful resource.

  5. I tried a long time to get some rounded or curved corners…thanks for this help, so I could solve the problem!
    Cheers

  6. 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!!

  7. Wow, thank you for sharing this. Very useful tipps :)

  8. Thanks Sir
    Png Transparency Will Help Me A Lot
    Thanks A Lot,
    Regards,
    Pradeep Lakhina

  9. Nice Article. I don´t support IE6 any longer.

  10. Useful tips. Thanks for sharing

  11. IE is for beginners and its thing with an easy setup is good.

  12. Don’t you know, IE is the best browser to download other browsers :)

  13. the new textshadow effect is amazing – very coooool

  14. where to upload htc file .. what to do with it ?? sorry for this am beginner :)

  15. 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.

  16. For IE6 fixed position does not work properly, it flickers whiled scrolling. any solution for that?

  17. Tnats great Thanks for the max-height. I have so many problems with getting the right height of neighboured layer. Now it is better for working ..;)

  18. I argued with my CSS dude last week about some of these issues and he said it’s impossible.. I’ll mail him your link and what will he say now!

  19. Wow, thanks man! I will update my projects right away :)

  20. Really helpful to improve compatibility of our Project with IE6. Thanks a lot!

  21. Thanks for the min-height, max-height. I have so many problems with getting the right height of neighboured layer. Now it is working, great!

  22. Very nice, this post gets a bookmark from me. My CSS skills are medicore, but even I did understand your post. Fine!

  23. Thanks for all the really usefully Informations and good explaination.

  24. the new textshadow effect is amazing, it saves a lot of time :)

  25. wow those tipps are amazing! i just added those to my new cheatsheet

  26. That are really helpful hacks even if IE6 has just a small usage percentage of users.

  27. Still useful! Bookmarked! Thanks for this useful post!

  28. Wow, not tested yet, but amazing whats possible with these hacks. Only 1,5% are using IE6 on my site. So i think it’s wasting time to optimize.

  29. Really handy list

    *bookmarked for future reference

  30. Thanks for this great list of helpful stuff!

    But I will hope IE 6 die soon!

  31. Awesome and well worth a bookmark. Especially the “Hover for non anchor elements” is something I’d been looking for quite a while.

  32. Hi all,

    thanks for all the really usefully Informations and good explained 10 Steps.
    Many Regards from Germany,

    P. Gutschein

  33. greats, thx a lot, this is help full for me now..

  34. Pingback: IE not interpreting text-indent on submit buttons ? | My Blog

  35. Pingback: 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog

  36. Thanks for this. Without your help I would still be trying to solve these issues. Internet Explorer really sucks.

  37. Pingback: 50 New CSS Techniques For Your Next Web Design | Theme Center

  38. Awesome, that is exactly what I was looking for! IE6 sucks! Thanks for sharing.

  39. pure css round corners works fine in ie6 for me maybe you don’t know how to

  40. 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

  41. I have seen all ten points. Those are very nice and useful to me.

    Thanks
    Rajesh

  42. 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.

  43. Pingback: Solución a 10 propiedades CSS no compatibles con IE6 | CSSBlog ES

  44. I liked Min, Max Height & Width tips. Thanks man

  45. Pingback: 50 New CSS Techniques For Your Next Web Design « Photoshop.vn – Your Design Resource

  46. Pingback: Advertisers Blog » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

  47. Not a big fan of using expressions based solution… mainly because of performance reasons. But overall many keepers from this post

  48. Pingback: Shopping Mall » Blog Archive » Mastering CSS, Part 2: Advanced Techniques and Tools

  49. Pingback: AMB Album » Mastering CSS, Part 2: Advanced Techniques and Tools

  50. Thank you! this is a much helpful article. Bookmarked and saved some downloads for the future.. :)

    greetings

  51. Thank you! The rounded corners one is really helpful, I always seem to mess things up with jQuery, so the htc hack is great. :D

  52. Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools « Tech7.Net

  53. Pingback: Mastering CSS, Part 2: Advanced Techniques and Tools | CSS | Smashing Magazine

  54. Thank you. This is a really helpful resource.

  55. Thanks for this. Bookmarked! :-)

  56. I’m keen to try the rounded corners hack but the html remix site seems to be down. Know anywhere else I can get this .htc file from?

  57. 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!!

  58. Pingback: 50 New CSS Techniques For Your Next Web Design | Desinine

  59. 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.

  60. Pingback: 50 New CSS Techniques For Your Next Web Design - Programming Blog

  61. Great list! Thx a lot!

    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.

  62. Pingback: 50 New CSS Techniques For Your Next Web Design « Tech7.Net

  63. Pingback: 50 New CSS Techniques For Your Next Web Design | 51Feeling

  64. Pingback: 50 New CSS Techniques For Your Next Web Design | CSS | Smashing Magazine

  65. Pingback: Best of The Web – June 2009 « Web And Graphics Design Tutorials

  66. Added this super post in our database, thanks.

  67. Pingback: Best of The Web – June 2009

  68. Ahh death to IE6 , one line of CSS at a time! Yes, a very useful list. Thanks!

  69. Pingback: Best of The Web – June 2009 | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

  70. 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.

    • Thanks for your comment, Tim.
      I guess you didn’t read the entire post. This post is for those designers/developers whose clients are insistent. If a client insists, you are helpless.

  71. Pingback: 10 CSS properties missing in IE6 | Special News | Technology News,Gadget Reviews,Auto & Car News,Finance & Career News,Broadband in India.

  72. Great list, especially the bicubic image resizing solution, never heard of but damn handy!

  73. 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

  74. g8 tuts… Fixed position got woking… but de .png pblm still remain

  75. Pingback: Bookmarks for April 23rd through June 17th | Maximi maxima maxi max ist da

  76. ranish chirayil June 16, 2009 12:23 pm

    great post!!! thankx for sharing

  77. Dude, the first one, I try to open the demo in the IE6, and it don’t show anything : (

    Where are the rounded corners?? :(

  78. Pingback: (Anti) Social-Lists 6/14/09 | (Anti) Social Development

  79. One of the most useful blog posts I’ve come across in a long time. Good job mate, real good job.

    P.S. How about increasing the line-height for the post title a little bit? It does look a little…hmm…let’s just say, messy.

  80. Your blog is really useful and got a great design! Congrats! Regards from Brazil

  81. who ever you are, your a genius…. well maybe! but really, thanks anyway sorted me out big time had problems with fixed positioning and the png’s

    Cheers

  82. GHope IE6 will die soon.
    For the PNG transparency issue, The unitpngfix.js[http://labs.unitinteractive.com/unitpngfix.php] script works fine. Because the above CSS will not support W3C standards.

  83. Nice post. Really useful

  84. 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?

  85. Pingback: Best Tutorials, Websites and Resources of the Week | Webdesigner blog

  86. 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.

  87. Thanks Gopal!
    It was pretty useful. I always hated it when I was asked to make it IE6 compatible.

    Cheers!
    netwala

  88. 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!!!

  89. Woo Hoo, awesome list, IE6 bugs being the bain of just about any web design/developer’s existance this is a realy welcome list covering some really crucial aspects of page design.

    Much Appreciated!

  90. Nice post, there’s a bunch of stuff here I never knew of.

  91. Also, a greater line-height on the comments’ text would be nice!… ;)

  92. 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/

  93. I had lots of problems with positioning transparent PNGs in IE6 but this script called DD_belated works flawlessly http://www.dillerdesign.com/experiment/DD_belatedPNG/

  94. Great to have these all in one place.

    @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.

    • Yes, you are right. I know that too, but there is too many bugs and security exploits in the old XP that must be eliminated. This can be done only by upgrading or changing XP :)

  95. Pingback: BlogBuzz June 6, 2009

  96. Lol :) So true. However, I hope there is not a long time until IE 6 finally fades out. Even IE users has to update as there is the IE 7 and IE 8. In my opinion, IE 6 will disappear as soon as XP does.

  97. thats a nice find – good tips

  98. Useful tips. Thanks for sharing.

  99. This is cool! thanks for sharing :)