IE Conditional Statements

For IE 5.5 and less

[MatthewHSE]

Hi,

I'm working on a page that just isn't right in IE 5 or 5.5. I intend to figure out why sometime in the near future, but for now I just need to get this page functional, almost no matter what it takes. So I decided to use IE Conditional Statements to give it a little different CSS.

However, I can't seem to get only IE 5.5 and 5.0 to recognize the conditional statements. It seems that no matter what I try, IE 6 also renders the code. Here are a couple of things I've tried:

<!--[if lte IE5.5]>
<!--[if lt IE6]>
<!--[if IE5.5]>
<!--[if IE5]>

And all of the above with a space added between "IE" and the version number, like this:

<!--[if lte IE 5.5]>

No matter what I've tried, the statements either affect all versions of IE, or none. So what am I missing? It seems so simple, but something isn't right.

Thanks,

Matthew

[DrDoc]

<!--[if IE 5]>
code here
<![endif]-->

That will only show up in IE5.x

[grahamstewart]

And IE5.x is probably getting the page wrong because it uses the broken box model (so does IE6 unless you specify a full doctype).

To 'fix' the CSS for IE5 just include the size of your padding and borders when calculating width or height.

[MatthewHSE]

Actually it's not a box-model issue - at least, not unless the box model problems extend to font sizes under certain conditions, like using em's in nested elements.

I think I figured out the problem, too. I had been using the correct syntax for the conditional statements, but was testing with IE 5, 5.5 and 6 on the same machine (per DrDoc's tutorial). I think that probably the conditional statements aren't interpreted correctly under those circumstances. At least that's the only solution I could come up with.

And to go completely off-topic, has anyone noticed how really good IE 6 is compared with IE 5.x when it comes to CSS support? I mean, we gripe about how badly IE does CSS, and it's true that even IE 6 isn't as good as most other browsers, but it's sure a big improvement in the IE family!

[RammsteinNicCage]

Matthew, did you have an instance of 5.0, 5.5, and 6.0 open at the same time? That could be your problem... I think once one of them is open, that is what will run after you open any other IE version. Or am I wrong here?

Jennifer

[MatthewHSE]

Well, I know that most basic rendering is done by whatever version you have open at the time. However, there do seem to be certain aspects that, once one version has been opened, are used by the other two until you've done a system-shutdown. Of course I could be wrong, but that's the impression I have after quite some time of playing with it.

[TheDoctor]

I had been using the correct syntax for the conditional statements, but was testing with IE 5, 5.5 and 6 on the same machine (per DrDoc's tutorial). I think that probably the conditional statements aren't interpreted correctly under those circumstances. At least that's the only solution I could come up with.

This is my experience. They're definitely not executed correctly if you have more than one version open at the same time, but I think they do work if you open the versions at diferent times.

However, if you're trying to hide CSS rules, why not use a CSS hack [centricle.com] to hide them?

[grahamstewart]

But why use a hack when there is a valid way to do it with existing code that is guaranteed to target the right browsers correctly?

[TheDoctor]

Conditional statements are correct for Microsoft's implementation of HTML. They should be treated as comments in other browsers.

They sort of work - if you can actually understand Microsoft's instructions as to how to use them - but there are all kinds of potential pitfalls. Not the least of these pitfalls is the problem with testing diferent versions of IE.

But where CSS hacks win hands down is that you only have to have one hack, in your style sheet file. Conditional statements have to be scattered throughout your web site, making maintenance changes a potential nightmare.

(If course, if you generate your HTML via a server-side application, then this latter problem doesn't exist.)

[grahamstewart]

Conditional statements have to be scattered throughout your web site, making maintenance changes a potential nightmare.

You could just add..

<!--[if IE 5]> 
<link rel="stylesheet" type="text/css" media="all" href="/styles/ie5.css"> 
<![endif]--> 

..to the head of each page, which doesn't seem particularly complicated or difficult to maintain to me. It gathers all the IE5.x hacks into one file, easing maintenance and reducing the size of the CSS file sent to compliant browsers.

(I usually go one step further and use a server side script that only adds these lines to the HTML if the user agent indicates that the browser might be from the IE5.x family. But that step is entirely optional and just an extra little benefit of using dynamic pages.)

[TheDoctor]

You could just add..

<!--[if IE 5]>

<link rel="stylesheet" type="text/css" media="all" href="/styles/ie5.css">

<![endif]-->

..to the head of each page, which doesn't seem particularly complicated or difficult to maintain to me.

It depends how many pages there are. I grant it's not complicated, but it could be overwhelming :-)

It's an option and so is using a CSS hack. There's no general answer as to which to use, applicable under all circumstances. You just have to be aware of the plusses and minuses of each method and choose the best one for you in the context of whatever it is you're doing. I've used both under different circumstances, and will no doubt continue to do so.