Thread

After looking at many hacks to fix sites that look good in every browser except IE and trying to get a single style sheet to work for all browsers, I discovered I could put in a conditional statement for IE so it uses its own style sheet.

I’d like to hear how others are handling IE and whether or not you think having two style sheets is a good idea. Given the box model is different between IE and other browsers it seems to be less of a headache to have a separate css for IE. 

Thoughts?

If you examine our stylesheets, that’s precisely the conclusion we came to, except that instead of entire stylesheets, we just use CSS’s inheritance to overwrite only the rules that need modification for IE’s ridiculousness.

Where can I look at those style sheets? I wrote over the one that came with my EE installation.

In my case, there are multiple people working on the same website, and everyone is not good about making changes and checking that those changes work in all browsers. So, I’m thinking that keeping separate style sheets may avoid people fixing something in FF and breaking it in IE. I’d like to look at the inheritance method, though. Is there a way to clearly label which parts of the single css are for IE or is all the code intermingled so that it would confuse a designer who just wants to change a font or color?

I mean the stylesheets we are using on the EllisLab family sites, including this one. 😉  If you do a View Source of this page, you can see that the separation is rather clear.  Then you can look at the IE stylesheets themselves to see the few changes that are necessary.

That’s a standard practice for me, a separate stylesheet for IE6 and 7 (if needed) but only to add fixes to. Conditional commentds are also handy to feed IE small scripts to fix its broken CSS implementation.

Ah, I think I get it. I was thinking that the conditional below was an either/or but not both kind of thing. So IE will be styled with the main css, but the styles in the IE css will override any of the styles in the main css if there is a style with the same tag name. Is this correct?

<!—[if IE 7]>
<link rel=“stylesheet” href=“http://expressionengine.com/?css=global/ie7.css” type=“text/css” media=“screen, projection” charset=“utf-8” />
<![endif]—>

<!—[if IE 6]>
<link rel=“stylesheet” href=“http://expressionengine.com/?css=global/ie6.css” type=“text/css” media=“screen, projection” charset=“utf-8” />
<![endif]—>

Ah, I think I get it. I was thinking that the conditional below was an either/or but not both kind of thing. So IE will be styled with the main css, but the styles in the IE css will override any of the styles in the main css if there is a style with the same tag name. Is this correct?

Spot on!
You can also use conditional comments in your HTML to add markup for IE as well.

Exactly.

I tend to build my CSS without hacks as far as possible, only using them only when necessary. Mind you I don’t build for anything less than IE6 nowadays and the only IE6 hack I regularly use is the one to deal with min-width and max-width!

I tend to build my CSS without hacks as far as possible, only using them only when necessary. Mind you I don’t build for anything less than IE6 nowadays and the only IE6 hack I regularly use is the one to deal with min-width and max-width!

This is sound advice:  test against the best browser available to you, then compensate with conditional IE comments.  This will ensure that you’re coding with proper CSS, using best practices, and also helps your content be accessible in the future:  when IE is updated and supports web recommendations more fully later, all you’ll have to do is drop your conditionals.  If you start with IE you’ll have to re-do everything later.

At our firm we don’t test past IE6/Win either, not really any need.  Incidentally, as of this writing, only Opera and Safari pass the Acid2 test:  Firefox’s Gecko engine doesn’t do that yet (though it should with v3)...

When redesigning my site I found a couple small things that didn’t work in IE7 specifically. So for those I just made a small style sheet and used:

<!—[if lt IE 7]>
<link rel=“stylesheet” type=“text/css” href=”/?css=styles/ie” >
<![endif]—>

I’m assuming this is what you meant by conditionals?

Given the box model is different between IE and other browsers it seems to be less of a headache to have a separate css for IE.

Only IE5 and less use a different box model. IE6+ in standards mode use the same box model as everyone else.

I usually use conditional comments. I don’t bother having different CCs for different versions though - just put all my rules into the same sheet. You can then add whatever hacks you want to that sheet if you want to differentiate between versions.

I’m assuming this is what you meant by conditionals?

Right, or:

<!--[if lt IE 7]>
<style type="text/css">
// rules…
</style>
<![endif]-->

For when you’ve only a few or are page-specific.

It is important to note that you always want your main.css file to appear first and then any conditional css sheets following to take advantage of the cascading inheritance that Derek mentions.

And this should be standard practice for all designers developing sites using standards.

M.

That’s a very good point.