Split up ie.css to remove CSS hacks

Completely agree, this is one of the things I dislike about Zen. I don't think many people care about IE5 or IE's quirks mode.

There's also some redundant IE-specific CSS, but that's another issue.

Hello. I'm using drupal 6.6,
and i'd like to know where I can find the function that calls the ie.css file at zen's directory...
I want to make it call my own ie.css file at my sub-theme's directory...

I can't find it on my .info file...
and in IE browser I can see this in the code:

and I agree with dividing the files for each version of IE, but I need to know where the above code is generated to do so...

thanks...

@a.luiz.n

Look at Zen's info file and find the line that adds the conditional stylesheet for IE, copy this line into your sub theme's info file, then clear Drupal's cache. I haven't tried this myself but I believe it should work.

I don't like those <!--[if lte IE 6.9]>, instead you should use <!--[if lt IE 7]>

lte means less then or equal, lt means less then

you never know with microsoft.... they might make a X.95 version...

Yeah I'd like to see this happen.

@ Rowanw
Thank You! it helped!

zen uses this code: conditional-stylesheets[if IE][all][] = ie.css

could I call the files for IE 7 or 8 in the .info file like this one, conditionaly? or my only option is to call them on the page.tpl.php to override?

i don't like css overriding on the page load, cause this way the page has to load all of my css files and the last one will override the others....
i'd like to load only one ieX.css conditional file...

There's no reason you couldn't use the info file to load the other stylesheets, just use [if IE 7] as you usually would.

thank you so much... i realized it just after making the question...sorry...

Anyone want to make a patch for this? I'd be happy to test it out.

Oh sorry, I didn't realise you were using the "conditional-stylesheets" we talked about, great I'll test it soon

Just noticed two problems in the patch, I believe, although i'm not certain that placing a "\" in a CSS property was an IE6 hack. I noticed there's still "di\splay" and "w\idth".

i like to see an ie5.css, as the ie6.css still contains CSS hacks, and serves both IE 5 & IE 6.

I like the cascading IE CSS, where you have to only fix the highers verion of IE to also solve all below.

let's try to get valid CSS ;)

Only IE 5.01 SP4 on Windows 2000 SP4 during the Windows 2000 life cycle (which ends on 2010-07-13) is still supported by microsoft.
(windows 2000 usage share is still around 2%, but also has support for IE 6.0 SP1)

also YUI doesn't consider IE5 an A-graded browser.

seeing this facts, i would say, drop all IE5 support right now.

Yeah lets drop IE5, according to W3schools http://www.w3schools.com/browsers/browsers_stats.asp in August it had less than 0.1% market share and they don't even report on it any more.

+1 for this. All this talk about Zen being Drupal's standards compliant theme, but when I open up the ie stylesheet, it's full of hacks! That's what conditional comments are for. For what it's worth, I usually have my sites set up with:

<!--[if lt IE8]>
// All IE stylesheet
<![endif]-->

<!--[if IE7]>
// IE7 only stylesheet
<![endif]-->

<!--[if IE6]>
// IE6 only stylesheet
<![endif]-->

We don't usually support IE8 or IE5, but those could be included. The sites I've tested usually look fine on IE8 without any overrides.

I believe IE5 will be dropped officially in Drupal 7. Although few actually consider it when writing patches for Drupal 6. Its up to each sub-theme author if they wish to support IE5, obviously. But since we've already got ok support for it in Zen 6, there's no reason to drop it just because we don't want a ie5.css file. :-p

Apparently, my knowledge of IE-specific hacks is too ingrained. Those hacks look totally obvious to me and having them all in one file is convenient since some of the rules are related, but cross IE versions.

However, it appears you guys have reached consensus regarding this. So, let's split ie.css into:
if IE: ie.css
if lte IE 6: ie6.css
if lte IE 5: ie5.css

Unless I hear objections, I'll commit the following patch shortly.

Yes I've got Drupal sites that work in IE7 but not IE8, I would support and IE8 stylesheet

IE8 shouldn't be part of the equation at this stage, Beta 2 is still missing basic CSS support and has numerous, significant rendering bugs.

First, on the IE8 question, I'm going to have to agree with Rowan, IE8 is still a moving target. We should wait until its more final and more stable before adding in support.

Good catch, Kevin! The "if IE LTE 6" was part of a syntax error I made in all the .info files, but somehow I missed fixing it in STARTERKIT.info.

However, changing "if lte IE 6" to "if lt IE 7" seems arbitrary. If someone is unfamiliar with the syntax, "lt" is just as inscrutable as "lte" is. Plus, I think having the integer match up makes things a little easier to grasp; for example:
"if lte IE 6" then we use "ie6.css" is slightly easier to understand than "if lt IE 7" then we use "ie6.css".

Also, you didn't update all the .info files properly with that change. So here's an updated patch with the corrected "lte" syntax. When I commit this, I’ll include credit for kmonty’s patch work. :-) Thanks, Kevin!

And thanks everyone for your input!

Strange thing is I've got websites that have more IE8 Beta 2 users than Opera or Safari

Fixed.

We can revisit this when IE8 is more stable and/or closer to release. Obviously, nothing stops you from implementing an ie8.css file before that. :-)

Let's open a new issue for that.

you could also write a hack using the method that the garland theme uses.

    <!--[if lt IE 7]>
      <?php print zentheme_get_ie_styles(); ?>
    <![endif]-->

in the header
then in your template.php file

/**
 * Generates IE CSS link
 */
function zentheme_get_ie_styles() {
  global $language;
  $iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
  return $iecss;
}

Garland's method is less flexible and groups all IE version hacks into 1 file. Which is the exact opposite of what people wanted in this issue.

u could modify the call so different functions are called according to the version of IE.

sometimes it's more efficient to group hacks for versions for code efficiency as they may all have the same bit of code that needs fixing :) it's better to write one line of code that suits 4 versons than 4 seperate files that have the same line of code :)

i think hard coding the path to the theme is a bit hazardous and could cause confusion with core and contributed themes. i would probably re-name the theme altogether and use it as a contributed theme. that's just my two cents tho in response to yours - only trying to be helpful

sometimes it's more efficient to group hacks for versions for code efficiency as they may all have the same bit of code that needs fixing

That's why Zen has one stylesheet that applies to all versions of IE. One stylesheet that applies to IE6 and below. And one stylesheet that applies to IE5.

i think hard coding the path to the theme is a bit hazardous and could cause confusion with core and contributed themes.

Zen doesn't hardcode any paths. I suspect you have never looked at Zen's code. Please do. (Hint: conditional IE stylesheets are handled in the .info file.) Or if you want to use your own theme and not Zen, look at http://drupal.org/project/conditional_styles