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]-->
Related
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]-->
First site i've built that get's this borked in IE9-older. Compatibility mode not helping. My employer shop is all mac, and the few PCs I tested on are rendering fine, but the client is running IE9, and it's not loading right. I tried on an old PC in the shipping dept running IE6 & similar borked result.
Been trying for hours to fix this site before it goes live on customer's domain. Staged at: http://hjshopper.com/littfin.temp/index.php
If anyone has any suggestions, I'd really appreciate it as i'm at a loss.
[UPDATE] So I've figured out most of the issues. Basically i'm a newb who was using html5 tags(header, section, etc) that old IE didn't like(so obvious now). Changing them to div with classes etc solved 90% of the problems. No i just have to figure out the IE Z-index bug that is preventing the drop menu from showing on top of the main content.
I opened your site in IE 9 (on windows 7) and it worked fine but if I turn on the "Compatibility mode" of the browser the site renders wrong. In that case you have 2 options:
- Tell the users to disable the compatibily mode.
- Add this tag to your site head: . It forces the browser to use the latest rendering engine that is available despite what the user configures (maybe selecting standards to IE 8 or 7, or enabling the compatibility mode). Hope that helps.
what about targeting just IE with a extra css, that is the better way around
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all_ie_sucks.css" />
<![endif]-->
and for IE 8 and 9
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="get_real_browser.css" />
<![endif]-->
this will do the trick..
and since you also need something for really old browser such IE this will do::
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-really.css" />
<![endif]-->
But note that will be only for IE 6, if you want to target all browsers above IE6 this is the one you may want
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-rest-old-stuff.css" />
<![endif]-->
but i would create one for each of them, since they all render stuff differently..
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 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}
I'm wondering whether to put all CSS filters in a separate IE-only stylesheet, meaning an extra HTTP request, or just leave them in one big style sheet. Even though the filters are ignored by non-IE browsers, I imagine they would still have to be at least identified. Is there noticeable overhead for this?
As far as I'm aware, no. Because the filters do nothing in any other browser, the only performance hit is almost immeasurable in the amount of time it takes to load the line of CSS and figure out that it does nothing. There's no reason to worry about it.
If you're really concerned about it, you can put the filters in a separate IE specific CSS file and wrap the <link> element in a conditional IE statement.
I would go with a comment-style include of an IE specific stylesheet(s). They would not even be loaded for non-IE browsers and load tie of all characters is probably the best saving here. I wouldn't worry about and extra http call or two for version specific sylesheets, but as always that will depend on your actual site structure and content, e.g. stylesheet sizes.
e.g.
IE 7 or over:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
or
IE 6 only:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->