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..
Related
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.
i have a problem with ie8 not displaying the site correctly it seems to be using the mobile styles and not the browser ones.
i have respond.js polyfill loading but looks likes it not working...
here is the site online
http://www.mediacake.net/cake123/ecomore/
the original template works but iv made extensive changes to the layout mainly homepage
http://demo2.woothemes.com/?name=shelflife
if anyone can help i would be grateful
Your page has the following...
<!--[if lt IE 8]>
<script src="http://www.mediacake.net/cake123/ecomore/wp-content/themes/shelflife/includes/js/respond-IE.js"></script>
<![endif]-->
If you want it to work in IE8, shouldn't it look more like...
<!--[if lt IE 9]>
<script src="http://www.mediacake.net/cake123/ecomore/wp-content/themes/shelflife/includes/js/respond-IE.js"></script>
<![endif]-->
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}
CSS is not loading for my site on IE7 for some unknown reason. Its working fine for IE8, chrome and mozilla. You can see the website at www.fineartsbaroda.com
Is this answer resolved?
If not, I was going to suggest putting media="screen" for the default.css stylesheet link.
I suspect that it's because of ::-moz-selection.
css selection is not working in IE
You may need to add a conditional work-around/hack using something like
<!--[if gt IE 8]>
<![endif]-->
Does this conditional css loading for IE7 and lower work for IE8 in compability mode?
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx -> This clearly says compatibility view is to force IE8 render a page like IE-7.
If you have installed IE developer toolbar ( Install and use IE developer toolbar ), you can check if the CSS is used while rendering OR run the script # Detect Browser in compatibility mode to check which browser you're hitting.