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.
Related
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 have this html line
I am trying to make it so that when IE reads that line, it changes the "listHr" id to "listhrIE".
I have tried this, in an attempt to switch out the line altogeather, but no luck:
<hr id="listHr"></hr> <!--[if IE]><id="listHrIE"></hr><![endif]-->
I am sure I am doing this wrong. What is the correct way of doing this?
Thanks.
IE tags have a "not IE" component.
<!--[if IE]>
<hr id="listHrIE"></hr>
<![endif]-->
<![if !IE]>
<hr id="listHr"></hr>
<![endif]>
However I'd offer a better way to do it would be to just override the style of listHr when IE is detected
As #Paulie_D pointed out: conditional tags are deprecated and won't work for IE 10 and above. You can use a special meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
to force them to work however this is not recommended. See here: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
try these:
<!--[if !IE]><hr id="listHr"></hr><!-->
<!--[if IE]><hr id="listHrIE"></hr><!-->
if you want set this id for some version of IE, you can do this:
greater and equal IE8:
<!--[if gte IE 8]><!-->
less and equal IE8:
<!--[if lte IE 8]><!-->
equal IE8:
<!--[if IE 8]><!-->
You can use IE only conditional tags to detect IE.
Just like:
<!--[if IE ]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
So, In your case you need two things to change ID.
1) Display IE only ID
2) Hide non-IE ID
To apply IE only ID you need following conditional tag code
<!--[if IE ]>
<div id="listHrIE"></hr>
<![endif]-->
To hide non-IE ID you need to add display:none
<!--[if IE ]>
<div id="listHrIE"></div>
<div id="listHr" style="display:none"></div>
<![endif]-->
Now you can style your IE Only ID in way you want and it will only replace listHr when IE detects.
Update: To target IE 10 Use following jQuery: Before using add jQuery Migrate
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script> This line
to your page<head>
Then add
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
I hope this helps :)
I know that for targeting IE8+ you should use:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
For targeting non IE browsers you can use:
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
You can also combine conditions like this:
[if (IE 6)|(IE 7)]
But my problem, now that I want to target IE8+ or non IE browsers, I try to target them like this:
<!--[if (!IE)|(gte IE 8)]> -->
This should be non IE or IE8+ browsers
<!-- <![endif]-->
This seems to work for non ie browsers but add --> to IE.
I'm guessing it has something to do with the types of comments downlevel revealed, and downlevel hidden, but I'm not sure how to handle them.
From: link
The next example is the opposite: "Only show this content if the
browser is NOT Internet Explorer".
<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>
Conditional comments are only recognized by Internet Explorer — other browsers treat them as normal comments and ignore them. Note that in the second example above (the one that targets "other" browsers), the content is not actually inside a comment — that's why other browsers display it.
So I think that you can not combine two different types of conditional comments
This is what works for me. I ended up having to include the non-IE-8 css twice:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/ie8.css"/>
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<!--<![endif]-->
See:
http://msdn.microsoft.com/en-us/library/ms537512.ASPX
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Of course, this causes a performance hit, and makes the code harder to maintain. It does, however, work (at least on the browsers I've tried).
You might consider a good css library, if you can find one that meets your needs.
I am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![end if]-->
That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<!--<![endif]-->
So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.
Here is the correct format of the comment:
<!--[if IE ]>
Special instructions for IE here
<![endif]-->
here is a NOT IE comment:
<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->
source: http://www.quirksmode.org/css/condcom.html
edit: just noticed that their 'not' example is wrong. i have corrected it.
You should use like this :
Syntax :
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
reference link 1
reference link 2
Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
When faced with this problem, we went with the <script type="module"> solution. More details here.
We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.
Only browsers running ES6 and supporting modules will run scripts included with type="module".
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.