The scenario is that the website works wonderfully on all machines except the ones where the client works. It's in Africa and I've no hope of getting access to it. He has limited IT knowledge and we don't know a great deal about the companies net policies.
I know that he is using IE8 with the doc mode being 8 as well, I suspected it was running in 7 because of some CSS issues but apparently not.
I use a JSON file and Ajax query to populate an important part of the site. It works well in all main browsers. I've used Dev mode and tried IE7 and IE8 and it still works.
However, his machine doesn't load anything, I output messages into the console and when he checked (confirmed via screen dump) there was emptiness.
What is love is either a way or means of debugging it from here, full details about his machine or some explanation as to why the json can't be read.
If anyone is using IE8 perhaps you could have a peek- it's kingpetroleum.co.uk/conversion.php
The drop down should populate the form web selected.
Thanks for any help.
Edit: there's a redirect on the index page that goes to the old site. Please use the /conversion.php if you check it out
As mentioned in the comments you need to add a polyfill for the JSON object which is not supported on older browsers. See here for more info on browser compatibility of the JSON object. They mention that it should be compatible for IE8, but this is not always the case and if the user is running IE8 in compatibility-mode it won't work either.
You should include the polyfill script file before you load your other scripts, I recommend doing it in conditional comments:
<head>
<!--[if lte IE 8]>
<script src="/path/to/json3.js"></script>
<![endif]-->
</head>
This would only load the polyfill for IE8 and below.
Related
I'm trying to test a website on IE8, While i don't have IE8 on my computer i use Developer tools (f12) and document mode to imitate IE8, But it doesn't work, The browser isn't loading the alternative CSS file.
Conditional comments do not work in IE 11, even when using compatibility mode. If you need to test CSS for outdated versions of IE you really need to download a free VM from http://modern.ie. There are 90 to choose from so there should be one you can run locally or in the cloud.
In the comments you specify that you have the following conditional CSS:
<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->
If this is your actual line, then it's normal your CSS is not loaded, since it's specific for any version below IE8.
IE should load the appropriate styles when you set the document mode.
The Developer tools aren't the best to test websites, because the developer toolbar imitates the wanted, but uses its own agent & JS to make the pages work.
For me the solution is to setup some VM's (virtual machines http://www.vmware.com/eu/) for each browser, to be sure to have the wanted browser in real behaviour, or use something like http://www.browserstack.com/
But, I agree that debugging JS in a IE7 is quite harmful without any tools, I tried many of them, but none to advice! So conclusion, VM's
Also, in IE8 it's the same problem: The toolbar is much better than in IE7 but it's stil not made for developers...
I've checked a few places for an answer but I could not find one, so I thought I'd ask. I created a website on a free HTML5 template (the template was for a photo gallery). The website works fine on Google Chrome and Firefox but for some reason, some stuff like the fonts dont appear in Internet Explorer (tried with and without compatibility settings on IE9). Could this be because of IE's security measures or have I coded it incorrectly?
The website is at masidtech.com
On Chrome it looks like
But on Internet Explorer it looks like
I was going to use paste bin but the pastes look really ugly for source code.
So I have uploaded the entire website to MediaFire at http://www.mediafire.com/?9m2108pgzyje79t
and it's a 7Zip file (or I guess you could view source)
+I am no coding guru so I'd really appreciate if you could throw in some layman and thanks.
I faced similar issues in recent past. I can help you if you provide certain details. I just checked the link with the working image. I also tested the link with the notworking.jpg
Can you tell me the exact url in the browser which u see after http://masidtech.com/
for the non working image.
This is not a big issue, with modern browser in scene, and due to their hefty security policies the same website behaves differently in different browsers.
It seems that cufon doesn't work in IE9 – a friend has had a similar issue this week. I'm not sure why, or if there is a way to get cufon to work, as I haven't used it.
There are two options - keep using Cufon (why? I don't really get why Cufon exists!), and add this above your first replace() call:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Alternatively, and prefered, use font-face. If you use a eot, ttf and woff version of your font, it will work everywhere. http://www.fontsquirrel.com/fontface/generator has a tool to generate the fonts and the code from a ttf, if the font allows it.
You may find that http://www.google.com/webfonts has the font needed instead, which is Google's way of hosting fonts.
Edit: I've had a look and found Google has it: http://www.google.com/webfonts/specimen/Quicksand . Follow the wizard, stick their one line of code in your <head>, remove cufon and it will work.
Nice site design by the way :)
This has got to be really boneheaded.. but after reading the same very simple answer over and over on various blogs and on the microsoft site, that AFAICT I AM doing it right, I am still stumped, so I ask here:
Why does the IE conditional in this test page render the literal <![endif]--> at the bottom of the page in IE, when viewed on a local network ? I am pretty sure that is the correct syntax for an IE 'Downlevel-hidden conditional comment'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IEconditionalSyntax_wtf.html</title>
</head>
<body>
well?<br>
<!--[if IE]>
wtf?!
<![endif]-->
</body>
</html>
Update:
to save your time reading all the comments... if you are having the same issue:
Most of the comments below basically just propose possible (but inconclusive, ineffective) explanations, and a couple guys report that they were unable to reproduce the issue. So far it seems no one knows the answer. I only see the issue when viewing the page on IE9/Win7 (w/any browser/document mode)... on my local server (page served by my local iMac 10.6.8, w/built in webserver).
But just because no one was able to rid my local server of this issue does not necessarily mean that the below suggestions will not answer the issue for you. Until we know the answer(s) I suppose it is not helpful to assume anything. So you probably do want to try everything listed below, if you also have <![endif]--> appearing on your page in IE, for seemingly no good reason.
Patrick gives a great workaround, but it does rely on jquery.
I debated whether to award the bounty (that I started, and which expired on 16 April 2012), or accept an answer, so that where acknowledgement was due it was awarded... and there was no clear action for me.. so I just decided to let the system auto-award half the bounty to Patrick for the great (albeit jquery) workaround. I did not want to give the whole bounty because the whole point of the bounty was to satisfy my curiosity as to why I am seeing the conditional comment in the first place. I also did not want to accept any answer (so far) because in this case I am not going to use any workaround since the issue only appears on my local network and so is irrelevant for the production code live to the world.
IE10 won't support conditional comments, so I suggest using a different method altogether.
Javascript works well for this.
Here is what I do that is A LOT easier to use, requires jquery
var userAgent, version;
if ($.browser.msie) {
version = "ie" + $.browser.version.substring(0, 1);
$("body").addClass("ie " + version);
} else if ($.browser.mozilla) {
$("body").addClass("mozilla");
if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
userAgent = navigator.userAgent.toLowerCase();
userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
userAgent = userAgent.substring(userAgent.indexOf('firefox/'), userAgent.indexOf('.'));
version = "ff" + userAgent;
$("body").addClass(version);
}
} else if ($.browser.opera) {
$("body").addClass("opera");
} else if ($.browser.webkit) {
$("body").addClass("webkit");
}
Then you can write css like this:
span.something { width: 30px; }
.ie7 span.something {width: 25px;}
And, even better, use this in conjunction with modernizr and you can write rules based on feature support as well.. Note that those are global js variables, so you can even use those for different functionality based on browser. Like, if you need to write an ie7 hack or something.
EDIT: replaced code with less verbose version, same result
I'm dealing with a similar issue at work atm.
I would recommend testing it again with auto-detection of intranet off:
Plus all compatibility mode settings set to off
Plus with the addition of meta tag IE=edge
I think it may resolve the issue - IE is a strange beast!
It's because IE defaults to compatibility view when on a local network:
Many sites found on corporate intranets (read: the local network, like
http://myPortalSite) are Internet Explorer 7 capable today and expect
“IE” to act like IE7. In order to preserve compatibility with these
line-of-business websites and applications, IE8 defaults to
Compatibility View when displaying content in the ‘local intranet’
zone. An exception to this is ‘Localhost’ and the loopback address
(e.g. 127.0.0.1 + IPv6 equivalent). These addresses display in IE8
Standards Mode by default in order to meet the needs of web developers
and designers who often test pages meant for Internet consumption
(where IE8 Standards is the default) on local web servers.
Users can override the ‘local intranet’ setting by un-checking
‘Display intranet sites in Compatibility View’ at Tools ->
Compatibility View Settings.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx
To clarify, you are seeing this because you are accessing the site using 192.168.x.x, whereas I'm willing to bet everyone else who isn't seeing this issue is using 127.0.0.1/localhost.
I've added <!--<![endif]--> instead of <![endif]--> and it disappears.
I was having a similar problem where the conditional statement was in my <head> and <![endif]--> was showing at the top of the page when I displayed it in any IE browser, even when I uploaded the code to the server.
Since it was the last line before </head> I decided to move my print css call (which I needed to do anyway) to be the last line before the </head> and "voila!" now the <![endif]--> no longer displays in IE -- even on my local server.
HTML
<span class ="clean"><!--[if lt IE]></span>
<span class="clean"><![endif]--></span>
CSS
.clean { display: none; }
the conditional comments are rendered by internet explorer alone,the internet explorer 9 and above should support most of the elements in css.the comments will work fine with all versions of IE(best to use with 5 and 6).
I had recently this same issue.
In my case the conflicting code was one of the elements that I had inside the conditional statement for IE that had the lowest z-index in the page.
After setting this in order so that it would not be the lowest z-indexed it was fixed.
Example:
<!--[if IE 6]>You suck!<![endif]-->
Does it get its information from the user-agent?
These are called conditional comments, and are only supported by IE, so in short, they're a feature of IE.
See http://www.quirksmode.org/css/condcom.html for a more elaborate explanation.
To answer your question yes it takes information from the user agent but I will just work in IE and it won't work when you change the user agent in chrome or ff.
See this picture is from my windows NT (virtual pc) from ie6:
And I changed the user agent in from ie6 in this picture and you can see:
Internet Explorer's own rendering engine / parser looks for these conditionals inside all HTML comments as it builds the DOM from the markup. So they can go anywhere and will be interpreted in the same order they appear.
This is only valid for Internet Explorer. This will not be read from any other browser and will be taken as comment (that's why it is looking exactly as comment after all). It is not CSS but HTML comment, where IE knowns if the version match to do what is inside - to load css or something else.
It is a IE-specific (and other MS products) functionality only.
Addition: Such clause is used by Outlook also in HTML email messages: <!–[if gte vml 1]>
According to MSDN, IE conditional comments are using Version Vectors that grab the version of IE and Windows Version that the browser is running on. The comments are basically skipped by Firefox and all different browsers since they sit inside an HTML comment. But as IE is supposed to read those, it basically does not skip those specific ones.
I think you have it the other way around: the browser itself renders the CSS if and only if the browser can parse the instruction (in this case, the [if IE] instruction) it's not the server that is serving out dynamic CSS depending on the user-agent.
The following code in my html file is working for me:
<!--[if lt IE 9 ]>
<p class="warning">This page uses newer browser features to display larger versions of the small images appearing on the right hand side of the page and to enhance the appearance of the page. If you are seeing the message, your browser doesn't support some or all of these features.</p>
<![endif]-->
I want to expand it to test for other browsers, but I can't seem to find any documentation searching the web, probably because I don't know what to search for. What is the name language used in the test if that is what it is or how would I find documentation for it? I also need to find the names used for other browsers.
Thanks
The [if lt IE9] is what is known as conditional comments.
jQuery includes a method of testing for which browser you're in:
http://api.jquery.com/jQuery.browser/
But you're much better off testing for whatever feature you're looking to use, rather than browser. The BrowserAgent string can be forged quite easily, so you'll sometimes get Firefox users masquerading as IE users, etc.
This is a very broad subject, beyond the scope of an answer here. CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer should give you a good start.
And here is reference for Chrome browser by Google.