ASP.net web application designed in IE6 has compatability issue in IE8

Question

The web applications which I am currently using are designed to be work in IE6. But now my customer want's to upgrade the application to IE8. I installed IE8 in my system, but now the web pages are not well alligned as that in IE6.

The textboxes and some of the other fields moved from thier original positions, also thier lengths and breadths are changed. Some of the people suggested to put the tag <meta http-equiv="X-UA-Compatible" content="IE=IE5" > to the head section of the HTML pages for the compatible mode, but it didn't work for me. Could somebody please help me..?

Answer 1

I'm hoping that CSS style has been applied in a separate stylesheet, not inline. If it is inline, your best bet would be to redevelop those pages properly from scratch. Other clues that your HTML is good and doesn't need a scorched-earth policy:

• It's well formed (properly closed tags, use of quotes around html attributes)
• Use of DIVs and SPANs for layout, rather than TABLEs everywhere
• You have a DOCTYPE at the top of every page

If luck is on your side and style has been kept separate from content, an approach would be to create a brand new stylesheet, which you then use to make the pages look correct in IE8 / Firefox / Safari. You can then use Conditional Comments to revert back to the old stylesheet for IE6.

Answer 2

The title of this post sums up much that is bad about IE6 and why it's causing so many headaches for web developers today, and also why so many companies have been so reluctant for so long to make the upgrade. However, even those companies are being forced to upgrade now, as new licences for IE6 simply aren't available.

The UA-Compatible hack didn't work because all it does is tell IE8 to use it's 'legacy' rendering engine to emulate an older version of IE. This sounds like it should work but unfortunately for you, it only goes down as far as IE7 compatibility.

So you could try IE7-compatibility mode. That's not guaranteed to do the trick, but I guess it's one step closer to IE6. You should be able to test that by changing the meta tag you already have, but you can also switch the rendering mode in IE8 by going to the Developer Tools, which has a rendering mode toggle at the top of the window.

The trouble with all this is that it's not going to be a permenant fix for you. Even if you do get it working in IE7 compatibility mode, there's no guarantee that when users upgrade to IE9 (which they will start doing soon) that IE7 mode will continue to work for you. And IE10 is in development as well.

If the major problems you're having with the site are simply text boxes and other objects moving slightly, then you actually aren't doing too badly -- some sites written for IE6 are simply too badly broken in modern browsers to even consider upgrading them; they just have to be rewritten. But yours sounds like it ought to be salvageable.

The most likely culprit of your problem is Quirks Mode.

Quirks mode is a rendering mode that older versions of IE (IE6 and earlier) use instead of following the defined web standards. IE6 was the first version of IE that supported Standards Mode, although it defaulted to quirks mode for compatibility with IE5. Prior to that, IE5 only used quirks mode. This probably explains why the advice you had was to try using IE5 compatiblity mode... a pity that advice would never work, though.

There are a number of differences between Quirks mode and Standards mode, but the main one is the box model. In short, in quirks mode, the size of an element (ie it's height and width) include the border and margin, whereas in standards mode it doesn't.

There are whole range of other differences between the two modes, but that is the one which really causes the worst broken page layouts.

It sounds like your site was designed with quirks mode in mind, and not standards mode. Unfortunately, there's not much you can do to automate fixing it up; you'll just have to go through all your styles adjusting the positioning and sizing till it works.

You should also make sure that you have a valid Doctype declaration at the top of your HTML code. This will help the browser pick the correct rendering mode. Without it, you may find you still drop into quirks mode at times.

I would strongly recommend that you test the site in other browsers such as Chrome and Firefox. This is likely to help you by picking up other bugs in the code which IE8 may not have a problem with. I'd suggest doing this even if the end users only plan to use IE8, because as I say, they will almost certainly be upgrading to IE9 in the not-too-distant future, and IE10 not too long after that. IE9 is much more standards-compliant than IE8, and IE10 will be too, which means that if a page renders well in Chrome and Firefox then you should have some confidence that it will be okay in IE9 and IE10 when it is launched. This will save you from having a repeat of the IE6->IE8 problems in a year's time.

Hope that helps.

If you have any specific bits of code that you would like more help with, I'd suggest posting it here under a new question.

Answer 3

As a temporary work-around, you can tell your customers to view the web site in compatibility mode (you can even force the mode by sending meta tags/headers from server). Although, this may not fix all your issues, it should cover most of them.

From permanent solution, you should start migrating your pages one by one to standards mode (i.e. supporting current major browsers such as IE8/9, FF, Chrome, Safari)

Answer 4

designed to be work in IE6

This is your problem. IE6 was never a browser strong on standards and so it is likely the HTML contains many propriety work arounds - upgrading is showing just how awful these actually are.

Take a look here for a comical take on just how "good" IE6 was.

You can either:

• Fix the website (highly recommended)
• Tell the customer to stay with IE6

Even if you are a beginner you should be able to modify the HTML appropriately to fix this problem.