CSS for IE conditional comment

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
Post Reply
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

CSS for IE conditional comment

Post by Kosse »

Hi all,

since IE 7 is ~almost~ on his way (we'll see when) and many of us spend a lot of time battling with css hacks (for IE, safari or FF...) I thought it could be usefull to post what I use for css: conditional comments.

This is nothing new, nor a hack or an enhancement but a nice way (my way) :D to avoid looooooooong css with hacks everywhere that I cannot find afterwards... ;)

//Description
IE css conditional comment, usefull for css when IE/FF/Opera/Safari have different behaviours,
when IE7 comes out should (?) be solved, anyway usefull so your css hasn't too many hacks and is easier to read.

//What
-> 2 files needed:
1) header.php (or .inc) | put in /content/php/header.php (or wherever u want but adjust the RT {PHP: } )
2) ie.css | put in /phpwcms_template/inc_css/ie.css

//How to use in phpwcms?
-> put in phpwcms backend template this (for calling IE) in header:
{PHP:content/php/header.php}

//What does header.php look like?
Simple, this:

Code: Select all

<!--[if lt IE 7]>
<style type="text/css">@import "phpwcms_template/inc_css/ie.css";</style>
<![endif]-->

Now you put in your ie.css file your behaviours specifically related to IE
You can also modify header.php if u want to specify css for IE MAC for instance, look at links below on howto.

This is what MS says about it:
http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp
This explains it also:
http://www.quirksmode.org/css/condcom.html

Hope it can be usefull to you all.

Cheers

PD: you don't ab-so-lu-te-ly need to use the RT, actually you can just put in backend template header the piece of code, but I like to have a "clean header" in my template and I don' t like too much blabla in my header, I prefer to call a little file outside ;)
Post Reply