I have a Problem with the Position of the HTML elements. I am developing a web form.
Until today, I was using IE8 in my Computer (Company issues...) but today I got a new Computer with IE 10.
My problem is that I could see this form perfectly before, but now all elements are moved. For example, the are move 20px more or less to the top, and if I fix it for IE 10, I can't see it in IE 8 correctly.
My question is if the browser interpret in a different way the position:relative tags? And if it is like that, how could I solve it? The users of this form will use IE8 and 10 too...
I already add to my HTML code the tag <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7">
Thanks for all your help!
You can use conditional comments to apply style to specific browsers:
gt = greater than
lt = less than
lte = less than or equal to
gte = greater than or equal to
This will target anything greater than IE 8:
<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="gtie8.css" />
<![endif]-->
This will target anything less than IE 9:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ltie9.css" />
<![endif]-->
This will target anything that is not internet explorer:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Source:
http://www.quirksmode.org/css/condcom.html
Do you use any reset style sheet? If you don't I strongly advise you implement one. I'm afraid, this will almost certainly knock other elements out on your page. It basically gives you a consistent starting point across all browsers.
Where posible try avoid adding a whole bunch of browser hacks.
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 would like to ask if there is any easy way of displaying different page for IE6/7 users who enter a website.
Like a redirect from example.com to example.com/ie7
Unfortunately IE7 doesn't like the website I made so I want to display miniversion of the original website, I have put too much effort into the original to downgrade it now.
Will this line always work? On every version/build of IE7? Or is it more complicated?
I want to be sure that 100% of IE7 traffic gets redirected.
<!--[if IE]><meta http-equiv="refresh" content="0;URL=http://www.example.com/ie7"><![endif]-->
You can use a different CSS on the same page to get a simpler result
<!--[if lt IE 8]>
<link href="/IE7style.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
Just overwrite all the styling needed to make IE7 happy
to serve content to IE7 , you need to set the version in conditionnal comments.
<!--[if IE 7 ]><p>I'm IE 7</p><![endif]-->
IE7 and lower :
<!--[if lte IE 7 ]><p>I'm IE 7 at the most.</p><![endif]-->
Where lte means Lighter Than or Equal
The better way is
<!--[if IE 7]>
<script type="text/javascript">
window.location = "http://www.example.com/ie7";
</script>
<![endif]-->
This should be done server side. You can use something like ua-parser to detect ie <=7, and redirect to a new site accordingly.
I'm having trouble getting
<!--[if !IE]>
to work. I'm wondering if it is because I have this in my document
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
When I add
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<!--<![endif]-->
to my header for some reason, it doesn't work. However, if I add
<!--[if !IE]><!-->
<style>
All my CSS content in here
</style>
<!--<![endif]-->
to the actual HTML page (in the header) it works.
How can I fix it?
When I removed <!-->, I only checked in Internet Explorer (IE) which was working, but now back in Firefox the no-ie.css file had been applied to Firefox too. So I added back in the <!--> and removed the / (and added that into the main template so the CMS wouldn't add it back in) and all is working back in Firefox, but now the style sheet is being applied to IE!
So I tried
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<![endif]-->
and
<!--[if !IE]> -->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<!-- <![endif]-->
And that didn't work.
Basically I'm trying to get this page to work: http://css-tricks.com/examples/ResponsiveTables/responsive.php. But move the CSS content into a style sheet. Surely it's got to be simple. What am I missing? I'd rather not use jQuery if I don't have to.
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
Note: These conditional comments are
no longer supported from IE 10 onwards.
Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->
However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:
<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->
Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.
Reasons for why the Internet Explorer targeting doesn’t work: Internet Explorer 10 and onward no longer support conditional comments. From the Microsoft official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: Conditional comments are no longer supported.
If you desperately need to target Internet Explorer, you can use this jQuery code to add an ie class to and then use the .ie class in your CSS to target Internet Explorer browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
$.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include the jQuery migration script after jQuery so that it adds missing parts:
jQuery Migrate Plugin
Alternatively, please check this question for possible workarounds: browser.msie error after update to jQuery 1.9.1
The Microsoft-recommended syntax for downlevel-revealed conditional “comments” is this:
<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>
These aren’t comments, but they work properly.
I use this and it works:
<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
For targeting Internet Explorer users:
<!--[if IE]>
Place content here for users of Internet Explorer.
<![endif]-->
For targeting all others:
<![if !IE]>
Place content here for Users of all other browsers.
<![endif]>
The conditional comments can only be detected by Internet Explorer. All other browsers treat it as normal comments.
To target Internet Explorer 6, Internet Explorer 7, etc. You have to use "greater than equal" or "lesser than (equal)" in the if Statement. Like this:
Greater than or equal:
<!--[if gte IE 7]>
Place content here for users of Internet Explorer 7 or above.
<![endif]-->
Lesser than:
<!--[if lt IE 6]>
Place content here for users of Internet Explorer 5 or lower.
<![endif]-->
Source: mediacollege.com
First of all, the right syntax is:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->
Try these posts:
Conditional comments
How To Create an IE-Only Stylesheet
Another thing you can do:
Check the browser with jQuery:
if($.browser.msie) { // Do something... }
In this case you can change CSS rules for some elements or add
a new CSS link reference:
Read this: Applying stylesheets dynamically with jQuery
This is for until Internet Explorer 9:
<!--[if IE ]>
<style>
.someclass{
text-align: center;
background: #00ADEF;
color: #FFF;
visibility: hidden; // In case of hiding
}
#someotherclass{
display: block !important;
visibility: visible; // In case of visible
}
</style>
<![endif]-->
This is for after Internet Explorer 9
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {Enter your CSS here}
You need to add a space for the <!-- [if !IE] -->. My full CSS block goes as follows, since IE8 is terrible with media queries.
<!-- IE 8 or below -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/Resources/css/master1300.css" />
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<!-- [endif] -->
For the Internet Explorer browser:
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->
For all non-Internet Explorer browsers:
<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>
For all Internet Explorer versions greater than Internet Explorer 8 or all non-Internet Explorer browsers:
<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
A conditional comment is a comment that starts with <!--[if IE]> which couldn't be read by any browser except Internet Explorer.
From 2011, conditional comments aren’t supported starting form Internet Explorer 10 as announced by Microsoft in that time: Conditional comments are no longer supported
The only option to use the conditional comments is to request Internet Explorer to run your site as Internet Explorer 9 which supports the conditional comments.
You can write your own CSS and/or JavaScript files for Internet Explorer only and other browsers won't load or execute it.
This code snippet shows how to make Internet Explorer 10 or Internet Explorer 11 run ie-only.css and ie-only.js which contains custom codes to solve Internet Explorer compatibility issues.
<html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
<script src="/js/ie-only.js"></script>
<![endif]-->
</html>
This works for me across all Internet Explorer versions greater than version 6 (Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, etc., Chrome 3 up to what it is now, and Firefox version 3 up to what it is now):
// Test if running in Internet Explorer or not
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
In case you are working with IE 10 or above, as mentioned in http://tanalin.com/en/articles/ie-version-js/ the conditional comments are no longer supported.
You might refer to https://gist.github.com/jasongaylord/5733469 as an alternative method, which the Trident version is checked as well from the navigator.userAgent. This also verified in case the browser is working in compatibility mode.
Thank you Fernando68. I used this:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
if(isIE()){
$.getScript('js/script.min.js', function() {
alert('Load was performed.');
});
}
I am using this JavaScript code to detect an Internet Explorer browser:
if (navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
navigator.appVersion.toUpperCase().indexOf("EDGE") != -1)
{
$("#ie-warning").css("display", "block");
}
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/