I am creating a website for my company's product (I am pretty new at this), and I have just realised that A LOT of the formatting I have done seems to be completely ignored by IE versions 8 and below.
Is there a way for me to make the website direct the users of these browsers to a completely different and extremely simplified version of my website?
Any advice will be greatly appreciated!
The better way is to fix the issues by using a different stylesheet for IE8 and below.
This can be done using the conditional statements.
<!--[if lte IE 8]>
// Your IE8 and below HTML code here or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie8_and_below.css" />
<![endif]-->
If you wish to have a simplified version for IE8 and below, add this script on the page for which you want to have a minimized version.
<!--[if lte IE 8]>
<script type="text/javascript">
window.location = "http://www.example.com/ie8";
</script>
<![endif]-->
Then add your HTML markup on ie8 HTML page which will be only for IE8 and below.
You can target IE versions using conditional statements to include CSS files only to be loaded by those browsers. For example, to load a stylesheet only in IE8 and below, use:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can read more about conditional statements for IE here.
Alternatively you could sniff out the browser user-agent, and redirect accordingly but this is a less ideal solution, and it would involve page duplication.
You can get the version of the browser by the DOM object. Then you can put that in a if-else and check the version to be greater or not and then according redirect your page to somewhere else. You can also check if the user is using IE or some other browser.
var ver=navigator.appVersion;
var brw=navigator.userAgent;
if(brw.equals("msie"))
{
if(ver<8)
//redirect
else
//stay or something else
}
hope this helps.
Related
I am trying to call a different style sheet in the head section of my page depending on if the browser used is IE. It's "greyed" out but from what I understand, it's still supposed to work this way. The two style sheets are identical except for one line. But, it's not linking to mainIE.css and not replacing main.css. Am I doing something wrong?
<link href="examples/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
First, the conditional comments aren't supported in IE 10 and up. That may be why you are not seeing the other stylesheet load.
Second, the conditional comment won't instruct IE to replace your first stylesheet, just to load up another one. Typically in the second stylesheet you would just put in only the differences and let the C in CSS take care of it for you.
Try the following:
<!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->
Also I knew you can do the same thing within one CSS file, if only one line is the difference.
as noted, conditional comments don't work in ie10+; you need to use conditional compilation to target them...with that said, i'm not sure how to differentiate between ie10, 11 and mobile exactly, but i bet you can simply check your jscript version. here's a demo of conditional compilation
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html
The second ('commented') stylesheet for IE will NOT replace your existing stylesheet. It's added in as a comment so all other browsers ignore it, and IE tries to find comments with this [if] statement in it to display that content. Your IE stylesheet can simply overwrite that single line that's different instead of the whole stylesheet (DRY!), saving the IE user a duplicate download.
The latest versions of IE do not support them anymore (http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/), otherwise you can find more info here: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
[EDIT: here is a Javascript solution]
You could always do it with javascript if you went to target only IE users. You could do something like the following:
var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
useragent.indexOf("trident") >= 0
|| useragent.indexOf("ms") >= 0
|| useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
// do whatever you want here, like...
document.getElementById("myElement").style.height = "100px";
}
[EDIT2:] Actually, you could just write the stylesheet if its IE:
if(internetExplorer){
document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}
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 have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.
I have a set of folders like this:
RootContent
UsersContent
AdminContent
Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.
I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.
<script type="text/javascript">
if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
{
document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
}
else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
{
document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
}
</script>
In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.
EDIT: Just to clarify my CSS file is on my Root Folder not on the childs
A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.
In your web.config, add
It will automatically get added to the every page.
Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.
[SEE UPDATED]
a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For example, to test for all versions of IE greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.
Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.
Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.
I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.
Have you tried adding runat="server" to the link tag? Worked for me.