Conditional CSS / Comments

[Richardpixel]

I cannot seem to get conditional css comments to work so that I can call additional css files for IE6, and one for IE7.

I know this subject has been discussed on the forums and most threads point back to Chris's solution . This solution does not work for me as I just want specific additional CSS files to load for IE6 and 7.

I have tried AUG 10 solution (below) and that works in IE, but completely borks the layout for FF, Safari, Chrome etc.
--------------------
Replace
<!--[if IE]>
with
<script language="javascript"> document.write("\<\!--\[if IE\]\>"); </script>
And replace
<![endif]-->
with
<script language="javascript"> document.write("\<\!\[endif\]\-\-\>"); </script>
--------------------

I have turned off 'Compact HTML/CGI' and just used the normal code (below) but that hasn't even made a difference. Is there another trick I can use?

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="screen" href="base-ie7.css" />
<![endif]-->

[leehack]

What sort of things is your IE6 sheet doing differently, can you give an example? I put my IE6 hacks in the main stylesheet and have no problems.

iF you firebug the site, can you see your conditional statement in place and have you added the css sheets into additional files so accessible?

[jont]

try adding a space either side of the square brackets

[leehack]

Good spot Jonty, actinic treats square brackets (through a quirk i think) as variables, a space stops it doing that. Common problem with embedded JS.

[Richardpixel]

Thanks guys but no solution yet.

Adding the spaces has bizarrely screwed it for everything! The layout is now completely broken.

You can see the results here: http://s236341880.websitehome.co.uk/...ford/acatalog/

Lee: Here's my IE7 specific stylesheet:

/* IE7 */
.banner-right .contents:after,
.banner .contents:after,
.banner-left .contents:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*:first-child+html .group,
*:first-child+html .banner-right .contents,
*:first-child+html .banner .contents,
*:first-child+html .banner-left .contents {
min-height: 1px;
}

.banner ul.nav li {
float: left;
}

input[type="text"] {
width: 15em;
}

.list-within {
zoom: 1;
position: relative;
}

[leehack]

I think you have the spaces in the wrong place, inside the square brackets, not outside. Your site is showing:

document.write("\<\!--\ [if IE 7\] \>");

I think Jonty is saying (and i agree if so) that you need to do:

[ if IE 7 ]

Doesn't seem to be doing the 'write' either. Firebug the site to see the live code.

[Richardpixel]

Okay, misunderstood. I've tried that now though and it still doesn't want to play ball. I've tried various formats and all seem to screw any following HTML etc

<script language="javascript">document.write("\<\!--\[ if IE 7 \]\>");</script>

<script language="javascript">document.write("\<\!--\[ if IE 7 ]\>");</script>

<script language="javascript">document.write("\<\!--\[ if IE 7 \ ]\>");</script>

[leehack]

What's with all the backslashes, they don't look right to me, i thought conditional comments were more like:

<!--[if IE 6]>
IE6 instructions here
<![endif]-->

I've never used conditionals though, so could be talking out of my backside.

Whatever the problem is, surely what your JS is doing is wrong, you've at least got to get that writing correctly. Could probably use actinic's php to write the same i'd have thought?

[Richardpixel]

That's what I apparently have to put in to get the Javascript to escape properly. It's what's in the AUG 10 PDF.

I know how to do conditionals in non Actinic sites. I use them all the time and yes, your example of how to do it on a 'normal' site is correct.

I'm sure there must be something wrong in that JS, though it must were for some people otherwise it wouldn't be in the AUG.

Very confused now.

[jont]

Forget the javie.writey bumf - this works for me;

<!-- [ if lte IE 7 ] >
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<! [ endif ] -->

[Richardpixel]

Right, fair enough.

A tad cleaner but that's just not being picked up by the targeted IE for me, which is odd.

<!-- [ if IE 7 ] >
<link type="text/css" rel="stylesheet" media="screen" href="base-ie7.css" />
<! [ endif ] -->

IE7 is not loading that CSS

Even tried the following to make sure but not output for IE7 for me:

<!-- [ if IE 7 ] >
I'M IE7!
<! [ endif ] -->

[leehack]

<!--[ if IE 7 ]>
<link type="text/css" rel="stylesheet" media="screen" href="base-ie7.css" />
<![ endif ]-->

is the only difference i would do, not sure if that works.

The comments can be seen there, like you say not being read. I take it you are using IE7 and not puttin IE8 in compatible mode?

[Richardpixel]

No, that hasn't made any difference unfortunately.

When I use my non Actinic HTML version, IE7 picks up the specific css file and alert correctly so I know that's not the issue.