Forums: Front End:

I know this subject has been done to death, but what is your solution to designing in CSS for IE 6 and earlier?

Do you:

1. Not worry about it. We should design things that break in IE 6 so it will encourage people with IE 6 to upgrade.
2. Use CSS IE hacks
3. Create two stylesheets, one for IE 6 and below and one for everything else.
4. Some other solution.

Right now, we do #3, but that seems like a royal pain if any changes are made later when you have to update two stylesheets. I used to do hacks, but I was told that they all break in the newer versions of IE.

Thoughts?

4. mostly

I don't use hacks, I may create an IE only stylesheet - but only one that would build on the main stylesheet and just adjust what it has to for IE.

Mostly though I've found that any problems I've had with IE have been margins not working how I want, or other spacing issues. To resolve those I've often used a border with the same colour as the BG to make the spacing.

Granted I don't usually work on bleedin edge designs that might push the limits of what that little trick can solve, but what I'm saying is that you can often fix problems with the standard set of CSS rules and little thinking outside the box.

I usually use:

5. IE conditional comments in the html to load a css with IE 6 specific style overrides.

but do use hacks now and again depending on the project/time constraints. For example, the underscore hack still works and is ignored in IE7.

IE6 is static and will not be updated - we know what hacks work on it and also know which parsing bugs have been fixed in IE7.

Tell the person who told you they all break to do some tests instead of passing on incorrect info.

Cool, both of those solutions work well for me.

I never thought of changing the styles of only the things that are different in IE... d'oh. that makes perfect sense.

Originally posted by: DontBogartMe
I don't use hacks, I may create an IE only stylesheet - but only one that would build on the main stylesheet and just adjust what it has to for IE.

<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<script type="text/javascript">
<!--
	if (BrowserDetect.browser=="Explorer" && BrowserDetect.version <= "6" ) 
	{
		document.write('<link rel="stylesheet" href="stylesheetIE.css" type="text/css"/>');
	}
// -->
</script>

yes that's what I meant - your stylesheet.css will define everything for all browsers, stylesheetIE.css will just contain those little tweaks and changes for IE to override what was defined previously in stylesheet.css.

You should look into conditional comments too, as OW suggested:
HOT XXX conditional comments PORN
that way you can include your IE only stylesheet without needing to use Javascript.

Originally posted by: DontBogartMe
yes that's what I meant - your stylesheet.css will define everything for all browsers, stylesheetIE.css will just contain those little tweaks and changes for IE to override what was defined previously in stylesheet.css.

You should look into conditional comments too, as OW suggested:
HOT XXX conditional comments PORN
that way you can include your IE only stylesheet without needing to use Javascript.

I just meant that you'd wrap the link tag for the IE stylesheet in the conditional comments, e.g.

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