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;
}
Related
I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).
The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.
If I use a conditional comment, because it's only one line of CSS - can I use the following:
<!--[if IE 9]>
<style>
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->
I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?
Any help ideas would be awesome
Paul.
Yes, the way you set it up is correct and can be implemented in the <head> of the document.
As mentioned in the MSDN Compatibility documents about conditional comments:
<!--[if expression]> HTML <![endif]-->
is the way to write it. Any HTML element inside can be written, so <style> is valid to use.
<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->
Read more about conditional comments at MSDN or at Quirksmode (with some better examples).
I have been trying to get the CSS conditional comments working on MVC.(Conditional Comment below). I have been looking for the answer on google but they all seem to have the same code but working. But It doesn't seem to work for mine. Is there a problem in the code? It seems as thought it takes it as a comment. Does it not work for MVC Razor? Does it have anything to do with IE versions? If this question was already please feel free to link it for me! (Look at update)
<!--[if IE]>
<link rel="stylesheet" href="~/Content/BrowseStyle2.css" />
<![endif]-->
UPDATE
Conditional comments are not supported in IE 10. Is there another way to get IE specific Css files working or IE specific CSS classes?
It's the "~". I had the same issue. For some reason it's not being rendered on the server side, I guess since it's wrapped in IE conditional comments. You have two options:
Use the full URL of the file
Or do something like
<link rel="stylesheet" href="#Url.Content("~/Content/BrowseStyle2.css")" />
I hope that helps.
What's the "~" doing in the path to the CSS File?
I'm working on a small website, but of course IE doesn't view it the same as Chrome or Firefox do. I've read around and found using <--[if IE]> should make only IE use the stylesheet I need.
When I was using Microsoft Expression on a different PC earlier, it worked fine. I came home and started editing in Dreamweaver CS5, now it doesn't work as it should.
I researched it a little and I know that Dreamweaver views it as a comment rather than an if function.
So how can I fix/get around this?
Thanks in advance!
P.S. The whole piece of code I'm using is <!--[if IE ]> <link href="IEcss.css" rel="stylesheet" type="text/css"> <![endif]-->
Edit: I found the answer, I had to close the comment tag before referencing the stylesheet. http://www.quirksmode.org/css/condcom.html
You have a space after IE:
<!--[if IE ]>
Should be:
<!--[if IE]>
Other than that, it looks correct. But the space may very well be throwing it off, because conditional comments have to match an exact syntax – otherwise they get interpreted as regular comments and ignored.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html
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]-->
I've seen people doing things like this in their HTML:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Does this work across all modern browsers and is there a list of browser types that will work with that kind of if statement?
Edit
Thanks Ross. Interesting to find out about gt, lt, gte, & lte.
This works across all browsers because anything except IE sees <!--IGNORED COMMENT-->. Only IE reads the comment if it contains a conditional clause. Have a look at this article
You can also specify which version of IE. For example:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
If you can use Javascript, there are several options:
navigator.appName
navigator.appVersion
link
Or something more robust by using a library such as jQuery.
Finally, you could use the BrowserDetect object from QuirksMode.
Once you have the browser name and version, you can then insert HTML to link to a style sheet or include other tags.
Conditional comments are purely for IE (version 5 and later). The official Microsoft documentation is here. If you are going to use them the best strategy is to conditionally include external stylesheets or javascript files after your normal includes. This means that on IE your IE-specific code will override everything else. On any other browser the code will be treated as comments and ignored by the parser.
Further to Ross' answer, you can only target the Internet Explorer rendering engine with conditional comments; there is no similar construct for other browsers. For example, you can't write conditional comments that target Firefox, but are ignored by Internet Explorer.
The way I achieve the same effect as your example above is to sniff the user agent string. I then deliver a suitable CSS file for that browser. This isn't perfect because sometimes people change their user-agent string for compatibility.
The other way to target different browsers is to utilise browser specific hacks. These are particularly nasty because they usually rely on bugs in the browser and bugs are liable to be fixed!
User-agent sniffing is the best all-round solution in my opinion.