We released an application and made sure it works cross browser and cross device and it even falls back to work with IE7. Sadly we only have Windows XP machines here so could only test on IE7 and 8.
After release someone pointed out that in IE9 the home page wasn't displaying correctly. It was shifting the two columns on the right below the first column on the left. Sure enough if you try this in IE9 on your computer (a full version of IE9, not just IE10 with browser mode set to IE9) the columns shift. What's even stranger is that if you click one of the orange buttons on the left (FYI if you click-drag it has the same effect without bouncing you off the page) the layout fixes itself, and the two columns move back in line with the first column. This makes it damn hard to figure out what the problem might be.
I upgraded my home browser to IE10 after testing this and tried it and there are no problems. Even when going into Developer tools and switching the Browser Mode to IE9 and Document mode to IE9 Standards there are no issues.
I'm just wondering if any of you have come across something similar. I am of the inclination that this is some sort of IE9 bug that has nothing to do with standards compliance, since it works in IE10 with render mode set to IE9.
Any help, advice or even a quick 'yes that happens on my version of IE9 as well' would be much appreciated.
I have a workaround for you, so that for the time being you will be able to correct this critical issue.
Make IE Believe that it is IE8.
You can do it by just including this meta tag.
<meta http-equiv="X-UA-Compatible" content="IE=8">
Hope it helps until we found a concrete solution.
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 working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
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.
I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.
I seem to have a glitch on in Internet Explorer and wondered if anyone could shed some light
Taking the following page as an example
http://www.flipfilter.com/websites-for-sale
When running in IE not under compatibility mode, all the Cufon (js font replacement) headings disappear. When I click the icon to enable compatibility mode, the pagination seems to go crazy and extends down the page.
Can anyone point me in the right direction, specifically as to what causes either of these problems?
If the problem is a validation issue could you point me to which one specifically causes the two errors?
Just have the pagination issue to
resolve now!
Compatibility mode emulates IE7, so fixing your site to work with it ensures that your site will look acceptable to genuine IE7 users.
You can fix the pagination problem by adding float: left to #pagination-flipfilter li.
You might also want to adjust the margin slightly.