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.
Related
This question already has answers here:
Targeting only Firefox with CSS
(13 answers)
Closed 4 years ago.
Is there a way that I can set different top value for different browser? For example, top:17px for Chrome, but top:40px for Firefox?
I tried to set the top value for a class, but the top value seems works differently in different browsers, for example, I set the top:17px for the search bar, it works for Chrome, Safari and Opera, but when it comes to Firefox, the position of the search bar is way too high.
Then I adjusted it to top:40px then they are the same. So just wondering if there is a way that I can set different top value to Firefox browser,
Like -moz-top: 40px? But it didn't work
Not by using CSS, no. Vendor prefixes like -moz- or -webkit- are used for experimental features which haven't been fully standardized yet. They are not intended as a way of altering behavior for specific browsers; vendor prefixed versions of standard selectors like top have never existed.
If you are seeing differences in how your web site renders on different browsers, you are probably running into differences in the user agent stylesheet for these browsers. (For instance, since you mention a search bar, the margins or padding on the input element may be different.) Use the web inspector in each browser to determine where the difference is arising, then apply properties to the appropriate elements to make the behavior consistent across all browsers, rather than trying to correct for inconsistencies after the fact.
I don't think it's possible to target different browser in the same file, but you could use Javascript Browser Detection for this.
if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../assets/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
document.write('<'+'link rel="stylesheet" href="../assets/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
document.write('<'+'link rel="stylesheet" href="../assets/explorerStyles.css" />');
}
For old IE browsers you could use these:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="assets/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="assets/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="assets/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="assets/myIE8Style.css" />
<![endif]-->
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
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]-->
I have a CSS quandary.
If I do this:
<!--[if gte IE 8]> <link href="/ELS_Soulard_Project-web/css/soulard_base_ie_butchery.css" rel="stylesheet" type="text/css" media="screen, projection" /> <![endif]-->
That line of code shows up across the top of IE 9 and the css file that gets the IE fonts under control and provides background gradient isn't read. But... the page looks great in Firefox and Chrome.
If I change the statements to:
<!--[if gte IE 8]><!--> blah blah blah <!--<![endif]-->
variety, it looks great in IE 9 and Chrome.... BUT! Firefox ends up actually reading the file and ends up shrinking its own fonts and changing line height so that it all looks like ugly double spacing. I know Firefox is reading it because I went to the file meant only for IE and changed things in and it was reflected in Firefox.
Can someone help me figure out what is going on?
This is running on Glassfish 3.1.2.
In your second example you have added <!--> inside your conditional comment. That way the conditional comment is still open, but the HTML-comment is closed and the code in between is rendered by any browser.
Compare to this chunk:
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="de-DE">
<!--<![endif]-->
The last tag is excluded for several IE versions, but included for any non-MS browser and IE >= 9.
So here was the problem. I am using facelets and this was in the template file. What I didn't realize is that conditional statements as normally applied don't work with facelets. When processed by the servlet it just trashes anything it doesn't 'get' and so all stylesheets are read.
If you want to use conditional statements with facelets you have to put them in something like an element. It can get ugly.
Fortunately a stacker named BalusC has come up with a clever library that includes a tag for taking care of conditional statements. After a day of trying everythign every which way and looking everywhere on this, I finally found a single post that mentioned this issue with facelets and conditional statements. That lead to a Google code page for an 'Omnifaces' project where the tag (and a bunch of other useful features) is documented.
The library is available by way of maven (where I got it) but possibly other ways. Anyway from reading the post to fixing the code was all of about a half hour if that.
Facelets plus IE conditional statements = bad news.
Use outputText or Omnifaces or write your own component.
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.