i have used stylesheet main.css for firefox browser,and ie9.css for IE9 but problem is that style contained in ie9.css is not working on IE9 instead style contained in main.css is working which gives undesirable results?
It's hard to decypher what you mean without seeing your code. However to design for IE versions you can use conditional comments to specify different CSS rules for different versions of Internet Explorer:
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet">
<![endif]-->
Related
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'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 thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.
In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?
Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.
http://jsfiddle.net/LsXTk/1/
IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS's part with IE. (Yes, I'm being sarcastic):
http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx
What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.
As for detecting IE8, you can do it without JavaScript via IE's conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
Then in your css, you can easily serve up separate CSS as needed:
.myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
CSS is not loading for my site on IE7 for some unknown reason. Its working fine for IE8, chrome and mozilla. You can see the website at www.fineartsbaroda.com
Is this answer resolved?
If not, I was going to suggest putting media="screen" for the default.css stylesheet link.
I suspect that it's because of ::-moz-selection.
css selection is not working in IE
You may need to add a conditional work-around/hack using something like
<!--[if gt IE 8]>
<![endif]-->
How many external IE Conditional Style-sheets do you use for Internet Explorer in your web projects?
See this page before to answer : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I usually have one for IE6, and one for IE7. I haven't had the need for an IE8 specific stylesheet, and having a separate stylesheet for all versions of IE isn't really practical.
<!--[if IE]>
global css for all IE's
<![endif]-->
<!--[if IE 7]>
css for specific version
<![endif]-->
yes you have two files but it's ok for me =) usually you just test global one, does this works nice in both versions, if not, then just put it in specific version css =)
btw with this script http://code.google.com/p/ie7-js/ I usually have no issues in ie7