Hi, in ASP.NET application, how to design the pages in such a way that they are displayed properly in both IE6 and IE8 browsers? I would like to minimise the CSS work that I need to do if there are any general guidelines to follow which will work in both browsers. I may still need to tweak here and there, but I want to reduce bulk of the work. Please let me know if there are any such guidelines. Thanks in advance.
+2
A:
If you add the following line to your section it will force compatibility mode and help minimize the amount of CSS you need to write:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
However, you probably won't get it perfect without writing custom CSS rules.
cinqoTimo
2010-10-15 17:44:19
thanks for this tip
RKP
2010-10-18 09:08:30
+3
A:
I have been coding a recent project and used the ie7.js script from http://code.google.com/p/ie7-js/. It works marvels at fixing IE 6 to a reasonable level. Then use this block to declare your body. (This part was ripped from html5boilerplate).
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
You can how polish up any stray css my using the respective id like this...
#ie6 .element{
//special stuff for ie6
}
The ie7.js script should save you quite a bit of time though.
Patrick Arlt
2010-10-16 01:24:23
there is another answer which says adding this script could cause performance issues, so I would try this as a last resort. thanks for the reply.
RKP
2010-10-18 09:10:46
I will not lie this will cause a performance hit on your page when you load it there will be a visible delay. But using this script was an acceptable solution for my project and DRASTICALLY cut down my development time. The trick with <body> should not cause any performance issues however.
Patrick Arlt
2010-10-21 00:08:54
A:
Start by making sure that basic layout of your page is working cross-browser. This can be quite trick, but the good news is that other people already did the heavy lifting for you. Just google for "one column", "three column", "holy grail" or whatever layout your are aiming for and you will find plenty of articles describing how to achieve it in any browser you want.
Starting for there, my suggestion is to code for IE8 and add hacks for IE6 when required. This should keep the hacks at a minimum since CSS that works in IE8 usually also works for Chrome, Firefox and the other decent browser.
Don't try to make your site pixel perfect across all browser, this will only drive you insane. Let your website "degrade gracefully" on the older browser. IE6 users won't care if the site don't have rounded corners or gradients anyway.
Using javascript to simulate modern CSS features in older browser is also a good idea. But I don't recommend using the ieX.js scripts. These scripts require too much CPU to run and can make your site unresponsive if your HTML is heavy.
Cesar Canassa
2010-10-16 07:32:14
I am developing against IE8, then checking it in IE6, but I found some differences, I guess making height and width percentage based than pixel based might do some trick, but I am not sure. thanks for the reply.
RKP
2010-10-18 09:13:02