So I have a very strange problem on IE8 :
I am using fontawesome and I get some encoding problems but not for every icons I put in the HTML.
JSFiddle
On JSFiddle everything is ok... but on my website it does not display the first icon (the red asterisk with the black background).
When I go in the menu of the browser : View>Encoding>UTF-8 (which is already set), then it is ok !! (how strange this is....)
I have set the encoding style in my html file : <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
I can't find if it is a bug or if I'm doing something wrong.
Any ideas ?
EDIT
following this answer I added this at the beggining of my code :
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8" />
I had this before :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
I had also try <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
When I first load the page (typing my url in the bar), every icon is showing right. But when I reload (CTRL+R or any refresh method), the first icon is replaced by an empty rectangle...
The only way (I found) to solve this :
hard refresh icons on domready :
$(function () {
// only on IE :
// Solve font-awesome loading troubles in IE8 & less :
// Solve also performance issues by removing animations
if (document.getElementsByTagName("html")[0].className.indexOf("ie") !== -1) {
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important;}';
head.appendChild(style);
setTimeout(function () {
head.removeChild(style);
}, 0);
}
});
with this in HTML :
<html lang="en" <!--[if IE]>class="ie"<![endif]-->>
I hope this will help.
Try setting the charset like this: <meta charset="utf-8" />
I think this is because you are not defining a font-family in your CSS. It is therefor falling back to your browser's default font in which the character doesn't exist.
This may also be an issue with IE8. Different browsers require different filetypes for embedding. Make sure you are using all the filetypes included in Font Awesome inside of your stylesheet.
Hope this helps!
Is it possible you have your browser set to a specific encoding?
In IE, Go to View -> Encoding and click "Auto-Select" and relaod the stylesheet.
Related
IE9 has a weird problem where it renders intranet sites in compatibility mode.
Does anyone know a way how to prevent this from happening?
Note: I am not looking for a way to prevent it on a single users machine, but some programmatic way to prevent the site from ever rendering in compatibility mode.
After an exhaustive search, I found out how to successfully prevent an intranet site from rendering in compatibility mode in IE9 on this blog:
From Tesmond's blog
There are 2 quirks in IE9 that can cause compatibility mode to remain in effect.
The X-UA-Compatible meta element must be the first meta element in the head section.
You cannot have condtional IE statements before the X-UA-Compatible meta element.
This means that if you use Paul Irish's wonderful HTML5 Boilerplate then on an Intranet with default IE9 settings your website will display in compatibility mode. You need to change the start of the boilerplate from the following:-
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
to:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
Following from #novicePrgrmr's answer, there seems to be a workaround for IE9 loading Intranets in IE7-mode. While this still triggers compatibility mode, I found a slight modification to Paul Irish's HTML5 boilerplate markup at least allows IE9 to render Intranets in IE9 standards:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<!--[if lt IE 7]> <body class="home lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <body class="home lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="home lt-ie9"> <![endif]-->
<!--[if IE 9]> <body class="home lt-ie10"><![endif]-->
<!--[if gt IE 9]><!--> <body class="home"> <!--<![endif]-->
<p>content</p>
</body>
</html>
This is still valid HTML, and existing IE-specific CSS should still work just fine, provided you target IE using .lt-ie rather than html.lt-ie.
This can be done by adding a simple meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Another way to accomplish this is to add this code to your .htaccess file!
# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------
# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
# mod_headers can't match by content-type, but we don't want to send this header on *everything*...
<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
If you can add code to the homepage, you can simply add this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
to your website's header.
(You can also use <meta http-equiv="X-UA-Compatible" content="IE=9"> to force IE9-Renderer)
This will force IE9 to render in standard mode.
Another way is to use another doctype:
Put this to the top of your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I don't understand why the fonts are bigger in IE8 and IE9. I am using Helvetica font. All other browsers are okay. I got problem only in IE8 and IE9. The line-height is also bigger. I cannot post the Link to my site here for some reason. But it's really simple use of css. Here is how my HTML header looks:
<!DOCTYPE html>
<html lang="se">
<head>
<meta charset="utf-8">
<title>Digi...</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="/resources/layout/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE like:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets is YUI.
see this: http://yuilibrary.com/yui/docs/cssreset/
Yes IE change the way he read the css or the styling from one version to another. In general its only the distance calculation that change. So all the padding/margin. line-heigh etc. The same way that when you look at a website in chrome,firefox,saferie,ie the website isn't exactly the same.
If the problems is really important for you (normally I ajust the css so that even with the difference the website) you can use CSS Conditionnal comment like this :
<!--[if IE 7]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
If you use css:
.ie8 body {
//IE 8 CSS
}
.ie9 body {
//IE 9 CSS
}
Or use the tag on you're meta tag
<!--[if IE 8]><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.8, minimum-scale=0.8, maximum-scale=0.8"><![endif]-->
(or change the scale to whatever you want) do the same for IE 9.
Edit:
Sorry #Tasos and #user3830694 I was slow to write the post and saw that you provided similar answer by the time I was finished :P
Try modernizr. It will try to normalize the CSS styling between different browsers.
http://modernizr.com/
According to HTML5 Boilerplate, I would expect the following included meta tag to remove the Compatibility Mode button from IE8:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But when I view my site in IE8, the compatibility mode button is still there. I want my site to work in IE8 and above and I do not want my visitor's IE browsers to show a compatibility mode button. The problem is that if someone clicks it by accident and turns on Compatibility mode in an IE8 browser, then my page doesn't render correctly because of weird IE7 quirks.
So how do I turn off the button?
EDIT:
Here is the beginning of my head tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
It's the same as default H5BP. I have also tried moving the compat. mode meta tag to be the first tag in <head> with no difference.
This has been going on for a long time (https://github.com/h5bp/html5-boilerplate/issues/1187). I use this (modify the classes below the doctype for your needs):
http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/
<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 8 ]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
I am getting the error: X-UA-Compatible META tag ('IE=7') ignored because document mode is already finalized.
I have read that the fix for this is that the meta tag is not declared high enough in the head tag, however I have tried moving this meta tag to be the very first line of the head tag and that does not fix the error.
I am working in a Grails .gsp file and the file also uses knockout js.
Here is the relevant code:
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>myInfinitec Membership Management</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/ucpmanagementportal/static/images/favicon.ico" type="image/x-icon">
<meta name="layout" content="main"/>
<script src="/ucpmanagementportal/static/plugins/jquery-1.7.1/js/jquery/jquery-1.7.1.min.js" type="text/javascript" ></script>
<link href="/ucpmanagementportal/static/bundle-bundle_coreCSS_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
</head>
Edit: In the IE developer window there are "Text- empty text node" lines being generated between every line. Perhaps this counts as having something before the X-UA-Compatible meta tag. I read that the fix is to add display: block and zoom: 1 to the affected elements but this does not work. Here is an example of what I am describing:
<head>
Text - Empty Text Node
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Text - Empty Text Node
<meta style="display: block; zoom: 1;" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Text - Empty Text Node
Okay well I solved my problem, though my problem turned out to have nothing to do with the error I was describing. I was experiencing errors due to IE's caching of ajax calls and was able to fix the issue by adding jQuery.ajaxSetup({ cache: false }).
This did not ever work for me. The fix I found is to add the X-UA-Compatible value to a before Interceptor of each controller and that seemed to make it work everytime. For example, in each controller I had
def beforeInterceptor = [action : this.&setBrowserCompat]
private setBrowserCompat(){
response.addHeader("X-UA-Compatible", "IE=edge")
}
This seemed to always work. Hope this is helpful
I'm using the excellent HTML 5 Reset template at html5reset.org and my X-UA-Compatible meta tag doesn't seem to work. Here is what my header looks like:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ieNoHtml5 ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ieNoHtml5 ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ieNoHtml5 ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title of Page</title>
The option to use compatibility view mode in IE is displayed (broken page icon in URL field). The problem is that some of my clients have set their IE9 browsers into 'always use compatibility view' mode, the result being that the website looks like IE7 even though they're using IE9, and X-UA-Compatible is suppose to override this.
Now if I remove the funny header stuff:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
...it suddenly starts working fine.
I've noticed that html5reset.org itself seems to display the broken page icon, so it doesn't seem to work either, but html5boilerplate.com DOES work, and seems to use the same approach.
Adding the X-UA-Compatible into the response header via webserver config seems to fix it, but I'd rather not rely on this approach.
Update: It seems that html5boilerplate.com is just sending X-UA-Compatible in the HTTP response headers if it detects that the browser is IE. This seems the way to go.
HTML5 Boilerplate recommends the webserver config. It's faster and solves a few edge cases that the markup solution doesn't work with: https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/html.md#x-ua-compatible