<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="/a/s/major-market/non-reponsive.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/a/s/major-market/ie7.css"><![endif]-->
I have conditionally included this two statements. Now when I try to ovveride a similar css in ie7.css it doesnot work. for example
In non-reponsive.css:
.header .features{
width:25%;
}
In ie7.css:
.header .features{
width:20%!important;
}
This is not working for some reason. please help me figure it out.
Ensure that the IE 7 conditional include is located below all other CSS declarations/includes within the page otherwise it will get overruled.
I am quite sure ie7.css is not loaded at all. !important would override anything in other stylesheets. Actually, if ie7.css comes after non-responsive.css, !important is unnecessary anyways.
That's the most I can tell by looking at the information you have provided.
Related
I've read so many articles about IE issues about css.
I am about to use this conditional comments:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
But, where in the world can I get the "all-ie-only.css" ?
Or what is inside it?
Thanks in advance!
That CSS file will only exist if you create it. The point of IE Conditional comments is to execute code only in IE, while it's ignored by other browsers. You can also specify specific versions of IE to target with your conditional comments as explained here.
For a simpler solution, consider the html tag classes as explained in Paul Irish's blog post, and then you can target specific versions of IE in your regular stylesheet by prepending your rules with the appropriate classes, e.g.:
.ie .component-name p {
position: static;
}
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.
So I am forced to use conditional style for IEs via the [if IE] comment. I have been trying to fit it in my code but I found some inconsistency that I cant explain.
If I use it like this
<!--[if IE]>
<style type="text/css">
#SomeName {
width: 100em;
}
</style>
<![endif]-->
it will just not work.
However, if I put the style in a css sheet and add a link to it, it works.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href=".../sheetName.css"/>
<![endif]-->
Is there a way for me to put the style inside the [if IE] tags rather than linking it through the tag? it just looks wrong.
Thank in adavance
Nothing wrong with your code.
Make sure that #SomeName is as such in the html (beacuse css rules are case-sensitive), and make sure that you include your code after the normal css include (to avoid having the rule overriden by what is in the normal css)
The first code snippet should work just fine if you are using the correct CSS selector. Make sure you are using the exact selector you need to adjust. However the selector is being used in your normal stylesheet, just copy and paste it into the conditional tag and change whatever you need to change in regards to width or whatever.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
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.