I've been creating a custom Tumblr blog theme for my site and all was going good until I tried viewing in IE9...
http://bantros.tumblr.com
Tested in newest versions of Chrome, Firefox and Opera and my blog looks the same and as expected whilst I was working on it, needless to say I got a huge surprise when I checked in IE9 and didn't know what to make of it.
I am using HTML5 and I double checked the code to see if I made a mistake or two, W3C Validator comes up with a few errors but nothing notable.
In my frustration I ended up inserting- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> and it makes it all nice again. This can't be a solution though, I must've done something wrong. Any help or tips would be great, thanks.
NB. I've taken out the Chrome Framework for now so you can see what I mean
It looks fine in IE9 right now.
The most likely problem is that your page was somehow in Quirks Mode.
That would make the page look utterly broken in IE.
To verify if this was the problem, open your page in IE, and hit F12 to bring up the Developer Tools. Try changing the "Document Mode", especially to "Quirks mode", and see if it matches the broken look you had before.
Related
I have just finished the layout for my website, and it is working perfectly fine in all browsers (Opera, Safari, Chrome, IE 7, 8, 9, 10 (both), and several others) - but this time around, the Compatibility View button in the address bar of IE 10 is appearing. This has not happened for a very long time and it's really annoying me.
I don't want the Compatibility View button to display at all. It sends a bad message to viewers/visitors. In this case, I have tested my whole site on different computers all running different browsers and different versions of browsers and I have not noticed a single problem.
Why is the Compatibility View button appearing if there are no issues?
Here's the problem, and like I said, everything works fine - except for when I turn ON Compatibility View in IE 10. When I turn it ON, the only things in my entire website I can see is my logo, and a little image in the top right corner of the page (but they're positioned exactly where I wanted them). What gives?
There's nothing wrong with the code - seriously. i've had it validated several times, all AJAX stuff works like a charm, and I really tried so hard to find a problem and I even intentionally tried to mess it up but it's working really well. The positioning of everything is spot on.
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues? And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
First and foremost, you can force IE not to display the Compatibility View button simply by adding this to your page head:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As for your other questions:
Why is the Compatibility View button appearing if there are no issues?
So what's the deal with this Compatibility View junk? Why is it there - on a website that does not have any issues?
It's there in case a site, typically one that was written many years ago, fails to work in a newer version of IE, to allow users to view or IE to display it in a legacy rendering mode where it will hopefully work better.
Additionally, it's there by default because legacy sites will not even have the meta tag above to begin with. In order for the button to display when viewing existing sites without having to update their code, it's only logical to make it an opt-out feature instead, by having the developer add it to new code to tell newer versions of IE to hide the button when it's not needed.
And, most importantly, is it important that I make sure my website works well while in Compatibility View even though it works perfectly when it's off and even though it works perfectly in all the major browsers - and then some?
Compatibility View is meant for websites that were specifically designed for legacy browsers, and as such, depend on legacy rendering quirks not present in more recent browsers which may cause "problems" in those more recent browsers.
Without seeing your site, we won't be able to determine why it works in IE7 and IE10 in IE7 mode but not Compatibility View, but if it works well in newer versions of IE, you do not need to ensure that it works well in Compatibility View. Using the meta tag above to hide the button when it's not necessary will suffice.
Can you provide us a link to your site? I always use
<!DOCTYPE html>
on the first line of the HTML document. This is a universal switch to the latest rendering mode in all modern browsers. Use BoltClock's solution to hide a compatible view button in IE's address bar. I would prefer a HTTP header rather than HTML meta tag, because the meta tag causes parser switch and reset.
I've been trying to figure this issue out for about an hour now. I've asked some friends but they didn't have much luck either.
The problem is with this site: http://tomdwyerdesign.com/
Load it in Chrome and it's fine. Load it in IE10 and it's fine... load it in IE9 and it's not.
It loses a good portion of its css. I've used the html5shiv trick and still it refuses to work.
Another website: http://tomdwyerdesign.com/new
this loads fine and shares almost an identical header.
Anyone know why IE9 won't render this correctly?
IE is going into quirks mode on your new site. Checking with W3 Validator shows a warning that is likely your problem: IE will go into quirks mode if you have comments before your doctype.
Try moving your doctype before the comments, and see if that helps.
I am new to html5, html and JavaScript. My website http://www.countrybait.com/ is looking perfect in Chrome and IE9 but its broken in IE8. Problem is my client has a IE8 and when I showed him it was bad looking. I tried alot to fix this but couldn't able to fix and don't know what to do to fix and atleast get a clean view in IE8. So please seniors help me. Waiting for your positive help.
There are many differences between the browsers you mentioned. Each one renders css a little bit differently, especially IE8. IE9 has a developer tools set (press F12 or look under Tools icon). There you can choose which browser mode you would like to see and it should render the page according to that setting. You can then see what items are causing the layout issue and make the necessary changes.
I always build to Chrome or Firefox, then go back and make it work in IE.
Depending on your site, it might take a bit to get everything working in IE8. There is not a simple fix.
I tried turning on "Compatibility Mode" in IE8, and it makes most things be in roughly the right position (notable exceptions are the top menu navigation and the main text content).
So one strategy you might like to employ is to try to get it to look good in IE7 / IE8 Compatibility Mode, then you can add a meta tag like:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
to your page to force IE to run in compatibility mode. Note you may need to surround this with IE conditional comments to make sure it doesn't run in IE9, which looks fine.
e.g.
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
Oh the newbie pain of IE, hurts dont it?
I realize that your are new to this kind of thing but see how quickly you can get up to speed with Sass/Compass. Compass comes with a lot of helper shortcodes and cross browser handeling. Its the new hotness and the real pro's use it (like myself :D )
Sass = shorthand css w/ nesting (so clutch), variables (nice and dynamic), mixins (templates)
Compass = framework to avoid cross browser issues and css prefixes, and some other cool junk.
Do it, seriously... I wish somebody told me to sooner.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is a very cool piece of code that forces Chromeframe or latest rendering engine. It can even be sent throught the http headers if you want the html to validate. But with this comes a doubt for me. I use IE8 in compatibility mode to test my websites for IE7 (either clicking the "sheet-of-paper" icon next to the URL box, or by activating "browsing mode" in developer tools). So my question is:
Does compatibility mode still renders webpages as IE7, or does the X-UA instruction blocks my intention?
Im worrying that I think ive checked my pages in IE7 and it turns out what im seeing it's not really what a native IE7 would show....
Thanks for your comments.
Anything you do in developer tools overrides the headers and meta tags. Here's a flowchart which explains it all:
If IE7 compatibility is really important to you, don't use IE7 mode in IE8/9/10 to test it. Use a virtual machine with a native IE7. IE7 mode in IE8/9/10 doesn't behaves exactly the same as a native IE7. What you worry about is true even if Chrome frame isn't installed.
I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.