Inspite of putting the following meta tag I am not getting the expected result:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
I open the developer tool window. In the same bar where the menu appears there is an item called Browser Mode: it still shows IE 8 by default. Even doing document.documentMode in the console window shows "8". Am I doing anything wrong?
That meta tag MUST be the first thing after the beginning head tag or it wont work... (before all other meta tags etc.)
The developer toolbar does not look at the meta tag when you open it, it is really more for if you want to see how any given web page "will" render if a user is using IE7. The toolbar just defaults to IE8, because that is the version of IE that you are using.
The meta tag tells the browser which mode to use when it's rendering a page that has been requested in the address bar.
Related
How do I investigate a "style sheet could not be loaded" message in Firefox? This message appears as a red bar below the page contents and above the developer tools. How do I find out what file the browser is referring to? I'm running version 46.0 on Linux Mint 17.3.
Update
If I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Another Update
This error bar comes and goes, it is not consistent for a particular page.
This may be a very specific edge case, but I had this exact same error with no indication as to which style sheet Firefox was complaining about. It turns out that it was the Ad Blocker that I was using. When I disabled the ad blocker and reloaded my page, the error went away.
This happens almost always when CSS is gziped, but server returns Content-Length of not compressed resource. Seen this happen when using mod_deflate with mod_fastcgi. This is server side bug, not firefox.
Update Notice:
Firebug is out of date, instead of firebug you want to be using Firefox Developer Edition which has Firebug-type diagnostics and tools built in.
Get Firebug, or otherwise view the page source code (right click on it on Firefox and choose View Source) and click through on each .css stylesheet as referenced in the <head> section of the HTML page. One or more of these will return an Error 404 or some other error.
Each CSS sheet is in a <link> element in the Head of the HTML.
Example:
viewing the source code to this page will give a pile of code, in the <head> section is the <link>:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=8c7d44a438e6">
...
</head>
This shows that there is a style sheet in the link element, and for your page/site if you click through all of these (there may be multiple ones) and find the one that gives you the specific error.
UPDATE:
(Update) if I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Therefore you should be looking in each of your CSS and related documents to see which document is linking out to an unreachable resource.
Another reason for style sheet could not be loaded is "active mixed content" in combination with HTTPS. I.e. if your HTML code is loaded over HTTPS, but references a CSS that is delivered over HTTP, Firefox will block the CSS file. The blocking will cause an explanatory entry in the Web console. See https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content for more information.
The blocking will also happen if the request for the CSS file is answered via HTTPS with a redirect and the redirect URL uses HTTP. And Google Chromium will also block active mixed content over HTTP and make an entry in its Javascript console.
I had this error from this stackexchange page, got the red line in firebug console. It pointed to the link https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396 so I checked the page source copy/pasted the link into a new tab and hit enter. Firefox screamed Security issue certificate error, So I just added an exception and the CSS loads. This error did not appear in Chrome or IE.
Easy fix.
I've added a RadGrid to an older ASPX and it works fine in Chrome and FireFox. Internet Explorer 10 does not render any of the sprites like the green plus sign for 'Insert new record' or even the funnels for the filter buttons. Clicking the empty space where the image ought to be works: the filter menu appears as does the insert form template appears.
Does anyone have any idea what could be the cause of this?
Some notes:
I have changed the meta tag to IE-9 compatibility with no success.
The console in IE shows an error when calling __defineGetter__. I haven't traced this too far; not sure if it's relevant to my problem.
The RadGrid operates fine, the only issue is that IE10 does not load
the image sprites. I've cleared my cache multiple times and have had
another user test it with the same result.
RadGrid should work out of the box with IE 10. Make sure you're running the latest version of the Telerik controls and clean out IE 10's cache. If that doesn't work I would check with Telerik's support directly...
Maybe the DocType, try:
<!DOCTYPE html>
Make sure compatibility mode is not being used:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Attempting to view my site on Google Chrome and occasionally I will get the following code displayed to me. This is a Wordpress site and it works great on other browsers, as well other users viewing in Chrome don't see this (that I know of).
Any idea what this code actually is and what might be causing it?
See a screenshot of what I'm getting here: http://s24.postimg.org/m93wtt26d/search_beauty_code.png
I'm using Google Chrome Version 26.0.1410.65 on a Mac
Your file has a wrong character encoding. The real encoding is "ascii-us" whereas the HTTP header and the meta tag declare the encoding as UTF-8.
First, you should try to set the wordpress default theme to see if the theme is the issue. If not, then try to check you apache configuration to understand why the document is encoded that way.
You could also try to change the meta tag (in you theme) to <meta http-equiv="Content-Type" content="text/html; charset=ascii-us" />, and the HTTP header Content-Type accordingly (via .htaccess).
The Content-Type header is not set in the server for that file.
Try to edit your .htaccess or PHP-code (when this content is being created/relayed by PHP) to include this header.
I just signed up for captcha. It gave me php code to display the captcha box on the page and code to put on the server. It works fine but the input box is misaligned (it might be based on the rest of the styling of the page.) I want to modify it manually but I can't.
When I do an inspect code in google chrome, it shows me the styling for the input box I needed. I unchecked a particular style
position: absolute!important
and it now looks fine. Now I need to actually modify the code. But it says the location is registration.php:1. Where is this? Registration.php is the file which creates the html code for the page and it does a "require" for a captcha php file. But I don't see the css style in that file either!
See these 2 images to see where the CSS could be coming from:
1- In Chrome console under the elements tab
2- In Chrome console under the resources tab
I have an MVC3 (razor) site published to IIS7 locally for testing purposes.
When I access the site via "localhost" it looks different from when I access using the IP address or machinename?
I have cleared my cache and re-loaded the pages to confirm and they still appear the different. The CSS must be loading to give the correct fonts/colours etc, although ":hover" elements appear to load much slower?
I am using JQuery/JQueryUI on the site if that helps identify the problem?
Any ideas?
Edit: More info
The titles, labels and table definition are build from ViewBag.Title, or looping through rows in a ViewModel - nothing clever, just standard MVC3/Razor stuff.
The same css file is used for every page, and F12 in IE8 shows the correct css has been loaded.
Title/subtitle font sizes/colours are correct, just their positioning is out?
Table border appears thicker?
Positioning generally seems a little "out", but I can't understand why there is this difference?
Can a firewall/AV package strip out positioning?
The same css file is used for every page, and F12 in IE8 shows the
correct css has been loaded.
Developer Tools should show that IE is not using the same "Browser Mode"/"Document Mode" between the two instances of the site, because that's the problem here. IE defaults to different modes depending on if you're using a machine name or not (amongst other things).
Adding this to your <head> should sort out the problem:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I had a similar issue, where the sizes differed from the local development site to the one on the production server. Turned out that I forgot the zoom level to 90% when viewing the development version... This answer helped me realize that: https://superuser.com/questions/315448/different-font-size-between-localhost-and-remote-server-in-firefox
I had exactly similar issue in IE11, I used this code
<meta http-equiv="X-UA-Compatible" content="IE=11">
And now whether its localhost or my machine name, the page always rendered nicely.
Just wanted to add, that if you use HTML5 tags (nav, header etc.) IE8 will render different on localhost and remote host.
If you add:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
Then the IE8 will show the same on local and remote host.