Setting up a conditional stylesheet
Permalink 1 user found helpful
I need to set up a conditional stylesheet for you guessed it - IE. Is there a correct way to do this in C5.
or is this OK
or is this OK
<!--[if lt IE 8]> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('style-overrides-ie.css')?>" /> <![endif]-->
Thats the approach I'd use. I might reference the stylesheet URI directly, rather than call it via PHP. One less thing for the server to do.
I am using Firefox and was wondering what the correct syntax would be to use a separate stylesheet for all IE browsers?
Any help would be appreciated.
Any help would be appreciated.
A quick google search brings up many results, the first of which is this excellent reference:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/...
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/...
I am using Firefox and was wondering what the correct syntax would be to use a separate stylesheet for all IE browsers?
Any help would be appreciated.
Any help would be appreciated.
I realise I'm digging up an old thread here but hey, that's what search is for.
I tried adding this in my theme's "header.php" file, just below the primary css stylesheet but it seems as though IE was ignoring it (or PHP was ripping it out) as it was not passed to the client when viewing my source.
Any ideas where I should put these conditional stylesheets?
I tried adding this in my theme's "header.php" file, just below the primary css stylesheet but it seems as though IE was ignoring it (or PHP was ripping it out) as it was not passed to the client when viewing my source.
Any ideas where I should put these conditional stylesheets?
Yes.. I actually looked into this extensively.
You're going to want to place the code in the head of your site.
I put some pretty lengthy code together that actually pulls info about the users environment and browser and version so you can build a different style sheet fro each browser if you want. I usually only need a separate sheet for I.E. You can print the info to the screen to test if you want but, I have the code commented out at the moment. I attached a copy of my header.php for you to take a look at. Let me know if you have any questions.
You're going to want to place the code in the head of your site.
I put some pretty lengthy code together that actually pulls info about the users environment and browser and version so you can build a different style sheet fro each browser if you want. I usually only need a separate sheet for I.E. You can print the info to the screen to test if you want but, I have the code commented out at the moment. I attached a copy of my header.php for you to take a look at. Let me know if you have any questions.
Another alternative is to not use conditional style sheets in the conventional sense, I use this technique, place the code below in the head of your site as your doc type:
This sets up classes for IE so in your CSS all you have to do to taget a specific version of IE is prefix your CSS with the appropriate class, like so:
It works on individual elements, in the example above it will just target the .header class of a site, the advantage of using this technique is you can include ie specific styles, in your main style sheet and cut down on http requests.
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8">
This sets up classes for IE so in your CSS all you have to do to taget a specific version of IE is prefix your CSS with the appropriate class, like so:
It works on individual elements, in the example above it will just target the .header class of a site, the advantage of using this technique is you can include ie specific styles, in your main style sheet and cut down on http requests.
Nothing new to add here, but want to cast my vote for the technique @Vidall shows -- I've been using this for the past year or so and I like it best because then I can keep all my styles for specific elements in one spot. So if I want to change the way something looks in my design, I can find it in the stylesheet and know that the normal browser styles and the IE styles are right next to each other. In the past when I didn't know about this method, I would always forget to go check the IE stylesheets.
Plus it is a teeny tiny bit faster as @Vidall mentions because you're not having to load additional files for the IE users.
-Jordan
Plus it is a teeny tiny bit faster as @Vidall mentions because you're not having to load additional files for the IE users.
-Jordan
So what if the condition you wish to base the alternative CSS is a page attribute and not a browser type?
So what if the condition you wish to base the alternative CSS is a page attribute and not a browser type?
First off, you guys all rock. Many thanks.
Secondly, I figured out what I was doing wrong: editing the wrong header file. It's slightly less stupid (but not much) than it sounds. I had created alternate page styles in my theme that had a modified header. I labelled them poorly and was editing the main "header.php" file for the theme and not the modified file.
Thirdly, thanks for all the code, I really like the conditional styles for IE but I will save that particular solution for a site I'm not already knee deep in.
Have a great weekend!
Secondly, I figured out what I was doing wrong: editing the wrong header file. It's slightly less stupid (but not much) than it sounds. I had created alternate page styles in my theme that had a modified header. I labelled them poorly and was editing the main "header.php" file for the theme and not the modified file.
Thirdly, thanks for all the code, I really like the conditional styles for IE but I will save that particular solution for a site I'm not already knee deep in.
Have a great weekend!
