ASP .Net pages not showing properly on other browsers

Question

My ASP.Net application only comes out properly if i am previewing it in Internet Explorer but its the ugliest thing ever if i view in Firefox,Chrome or Safari.

How can this be, and how can this be resolved.Helppppppppp

Answer 1

I'd advise using FireFox as your development browser, while testing in IE and Chrome as well.

Besides being more standards based it has superior web tools within, like Firebug, yslow and Web Developer.

Answer 2

Cross browser compatibility is, unfortunately, not trivial. It is a large topic with a lot of material devoted to it. As dove suggests, it's best to use a (relatively) standards compliant browser to do your development work, e.g. FF, Opera, Chrome or Safari and then tweak to make it work in IE 6/7/8 afterwards.

I would recommend against using any of Microsoft's built in theming etc. and stick to pure CSS based styling as much as possible. The ease of making your site cross browser compatible will, to a large extent, depend on your knowledge of HTML and CSS, but I recommend starting with a good CSS framework or at least a good CSS reset (which removes browser specific default styling and allows you start with a common base). Try having a look at Tripoli, which gives you a common cross browser CSS standard (a reset plus rebuild of default styles).

The usual way to tweak the CSS for IE is to use IE specific conditional comments to include an extra CSS file only for IE, e.g.:-

<link rel="stylesheet" href="http://tempuri.org/styles.css"&gt;
<!--[if IE]>
    <link rel="stylesheet" href="http://tempuri.org/styles.ie.css"&gt;
<![endif]-->

You can also include different stylesheets for different versions of IE, see here.

Answer 3

What DocType are you using? If you're using transitional then IE will be rendering in quirks mode. Force a DocType of strict.

Check out this link here for a good explaination of DocTypes and this link for an explaination of one major way the Doc Type affects layout: box models.

Answer 4

Have you compared the source of the pages in the different browsers? Are they the same, or are there major differences? If not, then you'll need to work on your CSS - and for that there are few better tools than Firefox and Firebug.

If the source of the pages is different, then you're falling foul of an ASP.NET feature that checks your user agent against a list of Browser Capabilities or the Browser Definition files - and in earlier versions of the framework, these were woefully out of date - what rendered as a <div> in IE would come out as a single cell <table> in Firefox.

Since ASP.NET 2.0, you've also been able to change the behaviour of controls with Control Adaptors - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc) - which again can be targeted to specific browsers.