In Chrome and Firefox my site loads perfectly, however in Internet Explorer 11 the CSS is only applying fully after pressing Ctrl+F5 (sometimes several times). Strange thing is that some CSS IS applied. Just some elements are ignored.
Since my CSS is pretty large I don't want to paste it all here but the behavior can be seen live here http://www.telefonievergelijken.nl
Here's how it looks in Internet Explorer 11 on 1st pageload:
And here in FireFox:
On your webpage:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I believe it is a problem. It tells browser to display page in IE8 compatibility view, so most things is displayed wrongly.
Related
I created an asp.net application and published it sucessfully on a local webserver.
The problem is, that any page of the application looks different in internet explorer.
I know that the look can be different in different browsers like firefox, ie, chrome...
The funny thing is, that it even looks different in the internet explorer on two different pcs.
When I open it on my laptop, the page looks 'normal' (since i wrote the css on my laptop, so i know how it should normally look), but when i open it on a desktop pc connected to the same lan, it looks very different (some objects are wider or higher). Both IE Versions are the same (9.0.8112.16421).
I really don't know how this is happening.
Begging for some help, please!
Several possibilities
IE is in Compatability mode
IE is zoomed in
The screen resolutions are different
The DPI settings are different
Just figured it out.
The Problem was the Quirks-Mode in IE9. I simply added following code inside my head-Element in the SiteMaster:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Because of the Quirks-Mode IE9 pretends to be IE5.5 due to backward compatibility.
This is pretty all you need to do the trick. ;-)
I've put up a test page illustrating my problem : http://www.heliopsis.net/var/fontcustom/
I've created a custom font with help from the awesome http://fontcustom.com/ but I have issues displaying it properly in IE8.
It seems that IE8 can use this font with HTML entities but not with CSS generated content. Even more puzzling, it sometimes manages to show the glyphs but loses them on page reload...
Does anybody know what's going on here ?
Here's a screenshot of what I see on IE8 :
In general, generated content doesn't work quite as well as it should (what does?) in IE8.
I played around a bit with your test page, and you might want to check that you aren't getting dumped off into IE8's compatability mode for IE7 or (even worse) Quirks Mode. Both of those seem to break the custom font, but I see it perfectly fine when IE8 runs as IE8.
To ensure that IE always gives to the most recent cababilities if possible add the
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta to your header. Also, use the develper tools for IE8 to make sure that your font is being loaded when you see the issue.
http://www.grossmag.com/2012/september/home.shtml
This link works in both Firefox and Chrome. I am not sure why it won't line up correctly in IE. I am trying to convert from old style tables/td's/tr's and this will be great if I can find out why it isn't lining up in explorer.
Sounds like your site is being viewed in compatibility mode in IE. This can depend on the DOCTYPE of your document.
To cause IE to display using the default mode of the current version, use the following META tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
This will not fix the site for IE7 (for example). If you wish to do that, then you will likely need to create custom CSS rules for older browsers
In IE9 Browser, a page is not displayed properly. Using developer toolbar I have found the following screenshot in which it displays
Browser Mode:IE9 Compat View
Document Mode : IE7 standards
If I force the browser to
Browser Mode : IE9
DOucment Mode : IE9 Standard
Then it display properly.
How can I show the page properly without forcing the browser to IE9 mode.
Ah... Internet Explorer didn't support HTML5 until IE9. Add this to the header:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also, add an HTML5 reset style sheet like this one:
http://html5doctor.com/html-5-reset-stylesheet/
It looks different in the emulated version of IE7 because you wrote it in HTML5, and IE7 was developed before HTML5 was even an apple in the eye of the W3C.
Be careful using hacks such as the one prescribed in the answer above. It is better to understand each bit of code you add to your site.
It is also important to remember that every additional document, hell every keystroke you add, creates a greater load on the server and browser, which increases your load time.
I am working on a site which is displayed properly in IE8 (when browser mode is IE8 and document mode is IE8 standards) and rest of the other browsers like chrome, firefox, etc. Except it is not diaplyed properly in IE7. I have heard of meta tags which allow users to force document mode to be displayed in a particular browser.
try adding the meta tag which will use Google Chrome Frame to render the page if chrome is installed in the machine.
<meta http-equiv="X-UA-Compatible" content="chrome=1">