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:
1. Go to your cpanel and click the MIME Types link2. 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 or Alternate Link and include the following code in your CSS.
| CSS |
| 1 | |
| 2 | .div_class_name{
|
| 3 | behavior:url(border-radius.htc); |
| 4 | } |
| 5 |
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.
| CSS |
| 1 | |
| 2 | .class_name{
|
| 3 | _background:none; |
| 4 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale'); |
| 5 | } |
| 6 |
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.
| CSS |
| 1 | |
| 2 | .opacity_div {
|
| 3 | filter: alpha(opacity = 50); |
| 4 | } |
| 5 |
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.
| CSS |
| 1 | |
| 2 | * html .fixed_div{
|
| 3 | position: absolute; /* position fixed for IE6 */ |
| 4 | top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); |
| 5 | left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); |
| 6 | } |
| 7 |
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.
| CSS |
| 1 | |
| 2 | * html {
|
| 3 | background-image: url(image.jpg); |
| 4 | } |
| 5 |
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:| CSS |
| 1 | |
| 2 | .div_class_name{
|
| 3 | width: expression(document.body.clientWidth < 1000? "1000px" : "auto"); |
| 4 | } |
| 5 |
| CSS |
| 1 | |
| 2 | .div_class_name{
|
| 3 | width: expression(document.body.clientWidth > 1000? "1000px" : "auto"); |
| 4 | } |
| 5 |
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
| CSS |
| 1 | |
| 2 | body {
|
| 3 | behavior: url("csshover3.htc");
|
| 4 | } |
| 5 |
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.
| CSS |
| 1 | |
| 2 | .div_class_name{
|
| 3 | min-height: 140px; |
| 4 | height: auto !important; |
| 5 | height: 140px; |
| 6 | } |
| 7 |
| CSS |
| 1 | |
| 2 | .div_class_name{
|
| 3 | height: expression( this.scrollHeight > 199 ? "200px" : "auto" ); |
| 4 | } |
| 5 |
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.
| CSS |
| 1 | |
| 2 | img {
|
| 3 | -ms-interpolation-mode: bicubic; |
| 4 | } |
| 5 |
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
| CSS |
| 01 | |
| 02 | input.button {
|
| 03 | width:114px; |
| 04 | height:37px; |
| 05 | border: none; |
| 06 | background: transparent url(images/button_image.gif) no-repeat center; |
| 07 | overflow: hidden; |
| 08 | text-indent: -999px; |
| 09 | } |
| 10 |
10. Text shadow
The shadow filter is one of the useful filters for IE.
| CSS |
| 1 | |
| 2 | .text_shadow{
|
| 3 | filter: Shadow(Color=#999999, Direction=135, Strength=5); |
| 4 | height: 1%; |
| 5 | } |
| 6 |
*bookmarked for future reference
But I will hope IE 6 die soon!
thanks for all the really usefully Informations and good explained 10 Steps.
Many Regards from Germany,
P. Gutschein
Thanks
Rajesh
Great Post though.
greetings
Mean time, code is hosted on google code. Get it : http://code.google.com/p/curved-corner/
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.
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.
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.
Where are the rounded corners??
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.
Cheers
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.
Any solution?
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.
It was pretty useful. I always hated it when I was asked to make it IE6 compatible.
Cheers!
netwala
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!!!
Much Appreciated!
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.