10 CSS properties missing in IE6

10 CSS properties missing in IE6

IE6 Impossibilities

IE6 Impossibilities

IE6 is a greatest pain for the whole group of Web Designers/Developers. It always takes to more work,more money and more time to fix the compatibilty issues in IE6. God knows, when IE is going to die, because it always ends up getting more work for the designers. I have came across few IE6 issues, for which I have found the solution and would like to let you know abt it,so that you dont hae to waste time on IE6 compatibility issues,when next time you work for a client or on a project.

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.

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.

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

Min-width:

CSS
1
2
.div_class_name{
3
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
4
}
5

Max-width:

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

Maximum height:

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.

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

THANKS TO GOPAL(ProductiveDreams.Com)

  • Share/Save/Bookmark

Related posts:

  1. How to Convert PDF Files to Text Format
  2. Send unlimited Fax document free to any phone number in US
  3. Is Noise Driving you Mad ? Switch to iSerenity
  4. What is HTML 5? Will it kill FLASH?

Related posts brought to you by Yet Another Related Posts Plugin.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment