For browsers < IE7, I want to use a certain style attribute, while for other browsers I'd like to use another. Can I do this using a single css file, or do I have to do if then logic to include an ie hack css file?
Here's an example how you can include an IE6-specific CSS to override specific CSS classes for IE 6 or lower:
<link rel="stylesheet" type="text/css" href="/css/screen.css" title="MySiteStyle" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/screen-ie6.css" title="MySiteStyle" media="screen" />
<![endif]-->
Alternatively, you can do it on per-element basis like this:
<!--[if (!IE) | (gt IE 6)]>
<div class="header">
<![endif]-->
<!--[if lte IE 6]>
<div class="ie6_header">
<![endif]-->
MSDN has some more details about IE Conditional Comments support.
Well you could use javascript to detect the browser and apply a class based on that. For example, see:
JQuery Attributes
You could use CSS hacks. But you shouldn't.
You could use conditional comments:
<!--[if lt IE 7]>
<style>
/*your style for IE <=6*/
</style>
<![endif]-->
<![if !IE | (gte IE 7)]>
<style>
/*your style for other browsers*/
</style>
<![endif]>
I've found it to be the cleanest solution for this kind of thing.
You can use CSS Expressions to some extent.
See http://gadgetopia.com/post/2774 for some examples. These don't get around conditional CSS attributes per se, but they do allow you to dynamically vary the values of CSS attributes.
on the jQuery tip check out this plugin:
http://jquery.thewikies.com/browser/
a plugin to do what ghills suggests, this is a nice clean way to go.
The following page will show you 6 CSS hacks specifically for IE7. You shouldn't use them, but they're the easiest way for getting the exact right look for your website.
Related
I need to be able to change the styleClass of my h:body tag based on the version of Internet Explorer. Can anyone tell me how to do this without using OmniFaces?
Thanks in advance
/Søren
You could put your version-specific styles in separate files and then use IE's conditional markup. For example:
<!--[if gte IE 8]>
<link rel="stylesheet" href="ie8.css"/>
<![endif]-->
Good day,
I want to apply two different CSS codes to fix some font-rendering issue (faux bold) in IE8, the latter cannot recognize all the font-family if they've got the same name, instead it only recognize the first font-family, so i'm attempting to use conditional comments to fix that :
First code is for older versions of IE (including IE8) :
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Second one is for IE9, IE10 and all non-IE browsers (Chrome, Firefox, Opera, Safari...), none of them has this faux bold issue :
<!--[if IE 9 | !IE]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I know the first code is correct (or maybe not :p) , so i want to know if the second is correct too, because i don't get what i expect when i change compatibility mode in IE, certainly there is something wrong in the condition [if IE 9 | !IE]
I also want to know the correct order (if there is one) to put those two conditional comments.
Please help me with this because i'm kind a newbie in anything related to compatibility :/
You could apply the css for IE9+ and other browsers first, and then apply the conditional comment for IE8 or less, so the rules for font-family in fonts.css would be overridden by the rules in IE8fonts.css, if the browser is less than or equal to IE8. This way you can avoid complex and unnecessary conditional comments.
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]>
<link href="IE8fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
Hope it helps.
Conditional comments are an IE specific feature. Other browsers just treat them as normal comments. Remember that an HTML comment starts with <!-- and ends with -->. Hence <!--[anything]> is the beginning of a normal comment, and non-IE user-agent will ignore anything after that until the next occurence of -->. On the other hand <!--[anything]><!--> is a full comment and non-IE browsers will process whatever is after that.
So I suggest you use:
<!--[if gte IE 9]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
From the point of view of a regular HTML parser (non-IE), this is two regular comments enclosing a link element.
I am in the process of cross browser testing my site and of course IE is giving me the biggest headache. I know I have to use conditional style sheets but am unsure of where to put these in rails so they are rendered only if IE7 or IE8 for example. I have seen a example on stack overflow but he seems to be using HAML whereas I am not.
Has anyone encountered this issue before and if so what did you do.
Thanks
Assuming you're using the asset pipeline, the only solution I've found for this so far is to not include your stylesheets so that they get compiled into the one file, but instead just include your IE stylesheet(s) separately in the head tag of your layout file as you normally would.
<head>
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
If you take a look at: http://www.nrgi-raadgivning.dk/erhverv
You can see in the code, that if you are coming from an IE, it should apply a stylesheet...
The IE stylesheet is supposed to set the margin:0 at the dropdown menu ul, but i doesnt?
Any ideas to whats wrong?
From your markup:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
However, the linked URL returns a "File not found message":
http://www.nrgi-raadgivning.dk/Files/System/ie7.css
Also, did you mean to link the same stylesheet twice? If so, you should be able to drop the second conditional comment.
Not found is a simple error irrelevant of the content within the CSS. Make sure your path (/Files/System/ie7.css) is right.
How could I select IE7 with pure (valid) CSS?
If you don't want to use a conditional comment (outside the CSS, e.g. defining a separare <style> section), the only thing you can use is CSS Hacks. See here for a "IE7 only" hack.
IE does support conditional comments, an IE-specific HTML comment syntax. You can use them to include IE7-specific CSS, e.g.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
There’s no equivalent in CSS, unfortunately. But, as mentioned in other answers, there are some valid CSS hacks you can use to target CSS rules as just IE 7.
I personally prefer the conditional comment syntax as it’s a bit more explicit, but you can make the hacks explicit with comments.
If you don't want a separate stylesheet for IE hacks, here's another way doing it with using conditional comments:
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
...page content...
</body>
This give IE6, IE7 and [all other browsers] a different body element class. Now you can write rules like:
body.ie7 div.scroll { padding-bottom: 16px; }
are expressions valid? if so:
cssAttr: expression( /msie 7/i.test( navigator.userAgent ) ? '#ie7val' : '#0th3r1' );
I highly doubt they are though, and technically that's CSS, but it's really JavaScript in disguise!
IE7-Only css jack:
*:first-child+html{ }