Firefox vs IE vs Chrome vs Safari [closed]

Question

Currently I am designing a website and I am finding it VERY difficult to display the website perfect on ALL browsers.

Is there any rules, suggestions etc to follow?

Thanks

Answer 1

Develop to standards, then add exceptions

Currently, the most popular mostly-compliant browser is Firefox, so developing to Firefox is a natural first step. Use the W3C's validators to make sure you're on track. Once your page is mostly done, verify that it still looks good in Safari and Chrome (also both highly-compliant browsers, so you shouldn't have too much trouble), then start fixing it for IE (both 6 and 7). And believe me, it will need fixed! Sites like QuirksMode can be a big help when it comes time to add exceptions.

Always use the HTML 4.01 Strict DOCTYPE

This is probably going to be one of the more controversial points here, as XHTML has a lot of proponents. Unfortunately, it is impossible to serve XHTML files in a manner which is both IE-compatible and standards-compliant — IE won't recognize the XHTML MIME types, and it violates the standard to serve them as text/html. Only the HTML 4.01 Strict DOCTYPE puts all browsers into (near-)standards mode while still complying with the standards. For more info, look up DOCTYPE switching. If you absolutely can't get by without writing pages which are well-formed XML, use an XSL Transformation to convert your pages from the XML flavor of your choice into HTML.

Don't use CSS "hacks"

They can be very tempting sometimes, but hacks are based on the side-effects of browser bugs. Because of this, it can be difficult-to-impossible to predict how future browsers will react to them. Conditional comments, on the other hand, are an intentional feature of IE browsers and so are safe to use. In fact, they are an excellent way to keep your IE-specific (and often non-validating) CSS out of your valid stylesheets.

Don't create pixel-aligned layouts

Trying to get all browsers to line up, down to the pixel is an exercise in frustration (and, often, futility). Try to create layouts which still look okay when clobbered, as it's easier to fix a misalignment between, say, two left-hand borders than a left and a right which are on opposite sides of the page! Using a background image which has built-in borders should be a big warning flag!

Don't use absolute sizes for fonts

Not everyone uses the same size monitor as you do; instead of setting a footnote to font-size: 10px;, set it to font-size: smaller; or font-size: 80%;. This is a big acessibility issue.

Don't rely on default values for CSS properties

You never know whether all browsers use the same default. YUI's "reset" stylesheet is a great place to start.

Answer 2

It is practically impossible to get a website to look exactly the same on all browsers and platforms. Number one reason is that fonts are rendered differently on Windows, Mac, Linux, Solaris, etc.

There is a new thought we follow: Websites do not have to look exactly the same on different browsers and platforms. You can take it to 96-98% of the way there very easily. The rest would take you an inordinate amount of effort for the potential gain.

We start development for Firefox. If we get that one right, the rest of the browsers are very close. IE is the real tricky one to get right most of the time. I recommend that you tell your client or yourselves that IE 6 is not really a requirement anymore.

Make sure you start off on the right foot by using a "reset" css stylesheet that puts all browser output on common ground. Check out: http://developer.yahoo.com/yui/reset/

Lastly, save yourself some trouble and standardize on a Javascript library like ExtJS or JQuery or Prototype that will conceal away the browser differences and let you concentrate on the code for your project.