Is there any way other than javascript to fix IE 6 bugs ?

Question

For IE 6 we have plenty of bugs to bug us as a designer.

incorrect box model etc etc.

i have searched for fixes via JavaScript and found

[link text][1] IE7.js IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

but do we have real life saver other than javascript via css.

Answer 1

The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.

Answer 2

Ways to deal with IE6 bugs with CSS? Sure.

See: http://www.quirksmode.org/css/condcom.html for conditional comments

There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.

However, in some cases, web designers should be very cautious when using these.

Answer 3

There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:

Simplified box model hack for IE4, IE5, IE5.5:

div.values { margin: 10px; m\argin: 20px; }

star html hack for IE4, IE5, IE5.5 and IE6:

* html div.values { margin: 5px; }

star first-child+html hack for IE7:

*:first-child+html div.values { margin: 5px; }

PNG transparancy issues could be solved with solutions like this:

<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
   <img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>

Answer 4

Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.

In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,

h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>

If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".

Answer 5

why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful

Answer 6

This tutorial will tell you how to use hacks in ie6, ie7, firefox, chrome, safari, opera... Css Hacks. There you can also get code for png fix also.

Answer 7

Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug

Answer 8

this link is also handy one

http://stackoverflow.com/questions/927626/how-do-you-deal-with-internet-explorer

I never knew this - thanks svinto "IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"

Answer 9

There's another quick and dirty hack for IE6 styles for e.g.

You can define the CSS as;

.divTitle { padding: 5px; width: 600px; _width: 590px; }

All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;

I've tested this in IE7 & FF as well.

Also you may want to check this link; link text