Is there an easy way to serve a whole stylesheet to every modern Browser but IE7 and IE8? Some kind of inverted conditional comments?
The following should work per Microsoft's documentation:
<!--[if !((IE 7)|(IE 8))]><!--><link rel="stylesheet" type="text/css" href="ie.css" /><!--<![endif]-->
I don't know much about web coding... but this looks like what you are looking for.
Check out this site.
If you are simply trying to exclude browsers older than IE9, it is simpler to use
<!--[if gte IE 9]>
<link ...
<![end if]-->
Otherwise, you will need to use other operators to fit a specific subset, as others have already provided.
The MSDN docs are very useful here: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
Note that you can use "!" to denote "not". So you could use something like this:
<!-- [if !(IE 7) & !(IE 8)]>
<link href="modern.css" />
<![endif]-->
Pretty straight forward.
Updated
Since IE's quirky conditionals don't get respected in other browsers. You could easily add jQuery to the page and do something like this:
<script src="jquery.js"></script>
<!-- add jquery first for browser sniffing -->
<script>
// if broswer is IE and less than version 9 write out the nice CSS
if($.browser.msie && parseInt($.browser.version) < 9){
document.write("<link href='modern.css'/>");
}
</script>
jQuery docs on browser sniffing: http://api.jquery.com/jQuery.browser/
Related
I want some html to be displayed for any browser other than IE8 and below
I tried this but it didn;t work. What's the correct syntax?
<!--[if !lte IE 8]>
// my html here
<![endif]-->
Just use greater than:
<!--[if gt IE 8]>
According to the conditional comment this is IE greater than 8<br />
<![endif]-->
Based on Mary Melodys comment you can also target everything apart from IE too! :
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
To cover all bases, I thought I should give an answer about a third-party library like jQuery. This library adds a layer of java-script functionality to your website and comes with a range of functions for determining which browser is being used (as well as the version of that browser).
Here is the documentation to coding what you would like to achieve within jQuery: http://api.jquery.com/jquery.browser/
And here is a quick example of how this would work:
if($.browser.chrome) {
alert( $.browser.version );
} else if ($.browser.mozilla) {
alert( $.browser.version );
} else if ($.browser.msie) {
if ($.browser.version < 8){
//Do what you will.
}
}
Obviously if you are looking for a more lightweight / portable method then #iswinky's method is the way to go. However, if you are looking for a more heavy solution that supports a range of browsers then I would recommend this approach.
I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it
I' ve website HTML5, Css3 and Jquery, it is look fine in IE9, but not look good in IE8
I read all solutions here, plus using all methods
Such as
CSS3 PIE
ie7-js
-
<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
-
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('hgroup');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
and.... and....
i can't find the best way to appear website fine in IE8
any help Plz.
website: moic-egypt.com
I won't recommend css3pie, it causes several side effects.
For the styling issue with html5 elements, you're correctly using a shim/shiv (like html5shiv), so you don't need the document.createElement part. That will solve most of the issues.
Instead of creating custom CSS stylesheets for IE, i would switch to conditional comments, so that you can add specific ie rules in the main CSS:
.ie #specificdiv { /* custom rule for ie */ }
When your project gets bigger you won't have to browse all the different sheets.
Then ie9.js, that's for css selectors (like :not) which weren't supported in older IE versions.
You've css3 properties left. For these, i'm afraid you'll have to search for fallbacks/polyfills one by one. Here are some beutiful resources to start with:
html5please
Can I use
List of cross-browser polyfills
how can I load a css file only for Safari browser ?
I usually use just this (without javascript)
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
for internet explorer 8.
Thanks
Real simple bit of PHP. Going to be an alternative for ASP too:
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
I haven't seen a need to in ages (like Safari 2). Make a new question about the actual problem you're having and someone can probably tell you how to fix it with nothing but redundant CSS or less.
Check out the CSS Browser selector plugin. It's really easy to implement and use, just write some special rules in your CSS, no extra stylesheets or anything. I use it and it works great!
Hope it helps :)
I've tried:
<!--[if lt IE 6.0]>
HTML TO HIDE FROM IE6
<![endif]-->
but unfortunately the stuff gets hidden from firefox too. Anyone have methods that work? I want the stuff to be hidden from only IE6
Thanks
You can actually use conditional comments to hide things from Internet Explorer contrary to the answer from deceze. These types of conditional comments are called 'Downlevel Reveal Conditional Comments'. (These are different from comments used to show things to internet explorer which are more common, those are known as 'Downlevel hidden conditional comments')
<!--[if lte IE 6]><![if gte IE 7]><![endif]-->
<!-- This is a bit mad, but code inside here is served to everything
except browsers less than IE7, so all browsers will see this -->
<!--[if lte IE 6]><![endif]><![endif]-->
However if you already using a downlevel hidden conditional comment to show a IE6 stylesheet just to IE6 then you might be best off just hiding it with CSS.
I hope this helps.
Little confused with your question but Here is the javascript code to detect the version of Internet Explorer. Taken from Detecting Internet Explorer More Effectively. Add the HTML contents which are to be hidden from IE6 in a div and hide it using the function below.
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
if ( ver == 6.0 )
**Hide the DIV here**
}
alert( msg );
}
Try
<!--[if lte IE 6.0]>
in your CSS, using lte (less-than or equal) rather than lt (less-than).
Conditional comments shouldn't affect Firefox at all as they are commented out and the browser should ignore it. I would check that your Firefox stylesheet is correct and embeded correctly something like this:
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="/css/ie6.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
Edit
After reading Natalie Downe's answer, I'd do it like this:
<!--[if true]><![if !IE]><![endif]-->
<h1>You're not using IE. Well done!</h1>
<!--[if true]><![endif]><![endif]-->
You can use negated conditional comments to hide things from IE but not from other browsers.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<![if !IE]>
<h1>You're not using IE. Well done!</h1>
<![endif]>
</body>
</html>
It renders some invalid markup, but it works.
Reference: http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Natalie Downe's answer is good enough, but there's a shorter and clearer version to hide content from IE6 (or whatever version below 10):
<!--[if !IE 6]><!-->IE6 can't see me<!--<![endif]-->
To target IE6 and below, you can use
<!--[if gt IE 6]><!-->IE6 and lower can't see me<!--<![endif]-->
And if you want to support IE10+ only, you can use
<!--[if !IE]><!-->IE9 and lower can't see me<!--<![endif]-->
In fact, IE10+ doesn't support conditional comments. Inspired by Browserhacks.
Every other browser can see the content, of course, since it's all valid HTML.