Is this a valid statement to place in a .css file?

@import url("styles.css");
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6_style.css" type="text/CSS" />
<![endif]-->

Every page on my site loads the div.css file, which itself imports the styles.css file.

I really don't feel like placing this ie6 reference on each and every page of my website. Can I put an <!--[if statement inside a css file?

Optional reading:
I am using a 24-bit .png file that won't work in ie6. So, for ie6 I will substitute the .png for a .gif (and live without that alpha effect).

http://www.friendly-skies.com

Nope.

Conditional comments haveto be in the HTML source

Ugh.

It's not a simple paste job, because of my folder hierarchy. Oh well. Thanks.

Does this look correct? I will place this in the head of all html pages. All browsers should read the divs.css and the style.css, but IE6 and earlier should also read the ie6_style.css.


<link rel="stylesheet" href="divs.css" type="text/CSS" />
<link rel="stylesheet" href="style.css" type="text/CSS" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6_style.css" type="text/CSS" />
<![endif]-->

One other concern: my affiliate ads make my pages invalid xhtml. I understand that because of this, any browser will use quirks mode to display my site. Will this cause issues with the code above?

Ken

Yep it looks fine.

Will this cause issues with the code above

Not with the code but it could cause problems with the display.

Why not simply use a HTML 4.01 Strict doctype or fix the affiliate links (HINT: use &amp; instead of & )


the question is though:
Why do you need a completely different style sheet for IE? I occasionally use the odd adjustment to get around some of the "oddities" but more often than not a bit of thought makes one style work for all.

My reason for needing a separate style sheet is for the navigation. I use a 24-bit .png image for the hover effect. IE6 does some strange things with this image. So I figured I would create a .gif substitute for the effect that would be seen by ie6 users. Arenlor suggested an alternative to this, which will try.
I've heard about this &amp; thing. So could I simply do a "find and replace" for my entire ad list?

With HTML 4.01 Strict, will that affect my margins and padding for my varous divs? I've got divs in divs in divs. Up until two months ago, I was still using tables.

Ken

I've heard about this &amp; thing. So could I simply do a "find and replace" for my entire ad list?

Couldn't be 100% without seeing code, but I would say yes. You may have to use a regular expression F&R to avoid messing up any existing HTML entities of course.

With HTML 4.01 Strict, will that affect my margins and padding for my varous divs?

It shouldn't do

I've got divs in divs in divs.

Sounds like you're still using tables, but making them with divs instead

Pretty much still using tables, but with divs instead . I had to struggle to create the perfect 3-column fixed centered layout, with content at the top of my html. My next site may be liquid, and a little less table-ish.

What did you mean by the F&R thing?

with content at the top of my html.

I wouldn't bother about this for the reasons you are probably doing so, 'cos it doesn't have the effect that the "experts" say it does.



F&R = Find & Replace

I prefer a much easier solution (yes, I'm a lazy hacker).

If you want to send a rule to IE6, precede the rule with a '_' like this:

p.example {
margin: 4px;
_margin: 6px; /*targets IE6 and below*/
}

Or, you can target IE7 and below as such:

p.example {
margin: 4px;
*margin: 8px; /*IE7 and below*/
}

Or, in combination:

p.example {
margin: 4px;
*margin: 8px;
_margin: 6px;
}

*Warning: Eventually, Microsoft will release IE8. Hopefully they will fix the bug that allows IE7 to be targeted in this manner. However, there is no telling what Microsoft will do. This means, unfortunately, that this hack will *break* your layout. Considering all the new difficulties that new browsers by MS means, however, this is relatively minor, to me.

You should NOT be putting hacks in your css - period. The recommended method, even by Microsoft, is to use conditional comments and a separate CSS file that contains ONLY the 'fixes' for IE.

The problem with putting hacks in your CSS is that those 'tricks' may not work the same way with future versions of IE and your site will break. This is already true with IE 7, as many hacks that USED to work IE 7 will now choke on.

Hacking is a bad practice and should be avoided as best practice.

Agreed.

I have a site that's grown and grown and yet more DIVs got added over time and as a result it looked different in IE6 & 7 & Firefox.

Who's fault is this...? Well, that would be me as I didn't browser check on each update.

WHat did I do...? I wrote a conditional statement in PHP to detect the browser and load an entirely seperate CSS file.

Hacking is a bad practice and should be avoided as best practice.

Even conditional comments will break with future release of IE. Consider this:

<!--[if IE]> <do something> <![endif]-->

Or this:

<!--[if lte IE 7]> <do something> <![endif]-->

In the first example, who is to say that IE8 will not have fixed it's bad code that caused the need for a conditional comment in the first place?

And in the second, who is to say that IE8 won't still be affected by the bug that caused the need for a CC?

The point is, there is no telling what future IE's are going to do. You are either going to fix your hacks or you're are going to fix your external stylesheets and create totally new ones. I don't care what Microsoft says is right.

It is true, hacking is a bad practice, but the coding of Explorer is a worse one...

I don't write my conditional comments that way, so there's no issue as yet. When IE 8 comes out with it's own set of bugs, we'll have to squash them too.

MY CC's are done this way:

<!-- <link href="css/chcc_print.css" rel="stylesheet" type="text/css" media="print" /> -->
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 6]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->

I'll just have to add an IE 8 one - whenever it comes out. We're stuck with IE, so we're stuck kicking it into compliance.

We're stuck with IE, so we're stuck kicking it into compliance.

Microsoft forever, baby! *choke*