Question

I am wondering if there is a way or settings I need to do in html file so that my asp.net website/html based website works properly with correct length/height dimensions in all the browsers (IE/Firefox/Opera)…etc…. Whats the settings and where I need to do it ?

Answer 1

There really isn’t one way to check all browser compatibilities…

The main problem with this is that each browser uses its own variation of the CSS3 standards. Gecko and webkit browsers seem to be fairly consistent, but IE usually throws a wrench in the gears, especially between versions.

In all honesty, you are best making sure you comply with the standards and include browser engine specific styles to target each browser.

For instance, if you are setting the background and you wish to have a CSS styled gradient, you may need to do something like this:

.gradient-bg {
    background: #ececed;
    background: -moz-linear-gradient(top,  #ececed 0%, #fefefe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececed), color-stop(100%,#fefefe));
    background: -webkit-linear-gradient(top,  #ececed 0%,#fefefe 100%);
    background: -o-linear-gradient(top,  #ececed 0%,#fefefe 100%);
    background: -ms-linear-gradient(top,  #ececed 0%,#fefefe 100%);
    background: linear-gradient(top,  #ececed 0%,#fefefe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececed', endColorstr='#fefefe',GradientType=0 );
}

This ensures that we address legacy browsers that don’t support any gradient transformations, as well as various versions that do support but in different ways (i.e. -ms-linear-gradient vs. filer: progid:DXImageTransform.Microsoft.gradient or -webkit-gradient vs. -webkit-linear-gradient). Also note that any CSS attribute that is not recognized by the browser is simply ignored and the browser’s rendering falls to the next recognized style variant.

It is becoming more and more industry standard that you develop for CSS3 and let unorthodox browsers render unorthodoxically.

The only way to be truly sure is to check it in each supported browser and see for yourself. Also be aware, though, that while IE comes with developer tools that allow you to view your content rendered as if in previous versions of IE, it still may be drastically different from the actual (non-compatibility view) version.

Easiest way to get IE to render the same (or close to it) across various version numbers is to force compatibility through a META tag. ( renders in IE7 mode and supports DOCTYPE directive).

Long story short… try to stick to standards to make webkit & gecko compatible, then address IE issues as you stumble upon them. Since IE is about the only browser not in the other 2 categories, you should be good.