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]-->
Related
I use this code to set style in ie8 and ie9, and this is not working.
<!--[if lt IE 8,9]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
but this code worked properly:
<!--[if lt IE 8,9]>
<style>
body{color:red;}
</style>
<![endif]-->
how can I fix the first case?
ADD<!DOCTYPE html> in the top of your html page, it will work if not
Try this:
*::-ms-backdrop, body{color:red !important;}
lt means "less than". What you're looking for is a conditional statement that handles if the browser is equal to IE 8 or IE 9 so you need to do something like the following:
<!--[if IE 8]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
I think the problem is that the path to your ie8-9.css is wrong. Check the console for any errors.
Maybe this article is interesting for you:
slash(/) vs tilde slash (~/) in style sheet path in asp.net
Furthermore, instead of
<!--[if lt IE 8,9]>
I suggest you to write
<!--[if (IE 8)|(IE 9)]>
if you want to use the stylesheet only for IE 8 and 9. I'm not sure if the syntax you are using is correct.
Maybe you also reached the maximum of 31 stylesheets per page in IE 8 and 9.
Don't test with such tools like IETester because they are not 100% equal to the real browsers. Go to modern.ie and download a virtual machine to test your site.
Other ressources:
https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://de.wikipedia.org/wiki/Conditional_Comments
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
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.
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..
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 problem with HTML 5 on my blog. I have made some small tiny changes to the default Twentyeleven theme and they site now blows up on IE6, IE7 and IE8.
Since I've started looking under the hood I've been thinking of re-skinning the site myself in HTML 4 Strict doctype.
Taken from the current markup: isn't all this a whole bunch of nonsense?
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://www.example.com/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
All this conditional formatting, for what? If the world isn't ready for it, why use HTML 5 at all?
Is there ANY technical reason to do that? Is my site ever going to validate if I take the HTML 4 route? Will I have to override the output of all plugins I'm using?
Looking forward to your comments.
There is no definitive answer to this question. It depends on the users (specifically, which browsers they are running) and requirements of the site.
Some sites need bleeding-edge technology or rapid design changes, both situations with which HTML5/CSS3 can help. Other sites are very simple and stable, and HTML5 is entirely optional.
There's no need to use HTML5 just because you can - if you can do everything you want to do in HTML4, use that.
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
Is it typo? Closing conditional comment tag missed. Add this code after yours
<![endif]-->
Maybe it will help.
Second. If you have different opening html tag for dfferent versions of IE, how do show this tag for other browsers? Conditional comments are understood only by IE.
More information more help.