ansaurus

Question

What is the best way to fix CSS issues in IE6 - with javascript?

Answer 1

+2 A:

Please don't use JavaScript to fix the problem, just add some rules to a stylesheet to fix them...

<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

In the ie6.css, you just have rules that fudge the styles to work in IE6, you still use your normal stylesheet alongside it, so your site looks the same in IE6 and normal world.

Sohnee 2010-07-29 14:01:35

Answer 2

A:

jQuery and its plugins work best for IE6 issues. Give it a try!

scubacoder 2010-07-29 14:03:15

*facepalm* ` ` ` `

Andy E 2010-07-29 14:04:56

How on earth does jQuery help with CSS issues?

Olly Hodgson 2010-07-29 14:05:39

The question has its reference to javascript fixing css issues. Now if you use jQuery plugins in IE6, like the jqueryUI dialog for example, you wouldn't have to compute the right specs for the CSS now would ya? In a way, jQuery fixed the CSS problem. tsk tsk tsk

scubacoder 2010-07-29 14:12:56

How does jQuery help you fix CSS problems in *your own* layout code?

bmoeskau 2010-07-29 15:23:08

Answer 3

A:

Generally, you don't need javascript. You can use plain old CSS. It helps to have a good knowledge of hasLayout though.

More often than not, you can fix IE6 and 7's issues by giving the problem element layout. To do that, give it a fixed height or width, or use the proprietary zoom.

My favoured method of targeting specific versions of IE browser is to use conditional comments to add a <div> as a direct child of <body> which lets me know which version of IE I'm in (like so). That way, I can target IE6 directly:

.IE6 div.fubar {
    zoom: 1;
}

The other thing to remember is that it's almost impossible to achieve pixel parity across IE6/7/8/Firefox/Safari/Chrome/Opera, so if some things don't look quite right in a browser that's nearly ten years old, you don't always need to worry about it.

Position is everything has some useful tips on IE bugs, too.

Olly Hodgson 2010-07-29 14:05:03

Answer 4

A:

Don't use javascript if you can avoid it - you are not guaranteed that your users have JS activated (as already mentioned) and you actually don't need it.

To get rid of many problems of different interpretations from browsers (not just IE) user a css-reset stylesheet. There are many floating around.

Even better yet, use a CSS framework which will remove many many problems between different browsers and will come with many helpful classes to solve standard issues.

I for one love YAML (http://www.yaml.de/en/home.html), then there's Blueprint (http://www.blueprintcss.org/) and probably a few others. Believe me - once you used a CSS Framework you will never want to go back.

Sorcy 2010-07-29 14:33:38

Answer 5

+3 A:

You can use this library if you want to do it with JavaScript:

IE7.js 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.

There is also CSS3Pie, which adds CSS3 support to browsers:

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Also have a look at Progressive Enhancement and Graceful Degradation for a design philosophy.

Gordon 2010-07-29 14:49:41

Wow. I'm shocked that out of 6 answers only one actually posted an example of said script I'm after. Thank you.

JAG2007 2010-07-29 16:55:02

Answer 6

+1 A:

From personal experiance, ie6 can be fixed within a few lines of CSS and a fair bit of inspecting with firebug/developers toolbar.. without the need for conditional comments.

majority of the problems I come accross are padding / margin based and it is down to me not using the best method first time round.
I also find that overflow:hidden fixes its fair share of ie6 bugs too.

i suggest, get ie6 open with the developers toolbar and try and find where the problem lies, and think of a better way to code that section.

Thats just me personally, I use conditional comments as a LAST resort.

Adam 2010-07-29 15:06:40

Oh and here is a PNG FIX that I always use, damn ie6 =)http://blog.pauljamescampbell.co.uk/about-2/png-fix/

Adam 2010-07-29 15:07:20

Answer 7

+1 A:

Dean Edwards’ ie7.js script (linked by Gordon) is still the state of the art in this area.

As to what’s the best approach, it depends. Dean Edwards’ script fixes a lot of IE CSS bugs, and allows you to use selectors like the multiple class selector and the child selector that aren’t supported at all in IE 6.

If you’re happy that the IE 6 users in your target audience tend to have JavaScript turned on, a library like Dean’s can save you a bunch of time, and allow you to trim down your code by using the selectors that IE 6 doesn’t support.

However, you’ll likely still need an IE 6 stylesheet to deal with issues that Dean’s library doesn’t fix.

The best solution may be to wait for Microsoft to stop supporting IE 6 (like they did with Mac IE 5), because if Microsoft don’t support it, it’s hardly fair for people to expect you to. We‘re currently hoping for 2014 on that score.

Paul D. Waite 2010-07-29 15:15:00

ansaurus

tags:

views:

answers:

What is the best way to fix CSS issues in IE6 - with javascript?

related questions