Firefox vs IE vs Chrome vs Safari...

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

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.

Answer 2

A lot of developer like to start testing with FireFox and go to IE7. This way they have both most popular browser.

I like to start with IE7 than go to FireFox because Firefox has this FireBug that let me see what's wrong and do the correction. But I have to say that I am changing slowly to test with FireFox fist since it does respect more all rules. (By the way, FireBug is available in Javascript for IE so it's great).

Of course, you should see who is your public. If it's internal used by the company and they only use IE... the choice is simple. If it's more for developer, you will have more user that will use FireFox... you might want to test first depending of your audience.

But, do not try to make it looks perfect on all browser, you will waste your time for nothing. Just make sure everything look ok and all javascript action are done correctly.

Answer 3

Don't try to make every browser display it pixel-perfect the same as the others... only you will know! Just try to make it look good on every browser.

Answer 4

Using strict doctype, valid xhtml/html and valid CSS are good starting points. Also, make sure you use reset/undo.css.

In spite of all these, there would be catches but very few though

Answer 5

• You will never get perfection, go for the best you can get it.

• Typically the best bet is to use subsets of css that work accross all browsers instead of browser specific hacks.

• For javascript, be sure to use a javascript framework (JQuery / Prototype / YUI / Ext / etc), and use it exclusively for dom referencing/manipulation. It is hard to get that stuff right, and they have already done alot of the work for you

• Good reference site

Answer 6

I would suggest identifying your target audience, then identify which browser they use. Once you have done this, push for perfection in that browser. Now, you can do some work around and make it look good for the other browsers.

Targeting for perfection in all browsers today is similar to asking for world peace.

Another approach you can take is use a Javascript framework like jQuery to ease the pain.

Answer 7

Develop for Firefox. Then apply IE-specific fixes. Hopefully, it'll render OK in Chrome and Safari.

The reason is that there are fixes available to make IE work 'properly' but not many to make Firefox behave badly.

Oh, and buy a copy of Transcending CSS.

Answer 8

• Make sure your XHTML and CSS validates.
• Only use standard Javascript.
• Test in one major (non-IE) browser: Firefox or Chrome would be my suggestion.
• Your site should now look very close in major (non-IE) browsers
• Test in something like dillo or lynx (or both)
• Finally, start doing the hacks to make IE work

Answer 9

I have discovered that using more CSS instead of tables makes it easier to get it the same on all the browsers. It's still a bit tricky, but table layout logics are worse. Use tables sparingly.

Oh, and getting things "stretchy" is always a problem. Fixed widths/heights are way easier.

Answer 10

Here is an answer I gave a while ago about perfecting websites in browsers (from here)

Actually, what you need to use when developing a web application are:

• FireFox
• IE
• Safari
• (Chrome soon...)

And what I mean is that you should test every step of your website on all 3 major Grade-A browsers...so if something doesn't work in the process, you will know exactly what caused the break.

If you don't check regularly with the browsers on how your page is turning out, it will be a lot harder to fix problems later on.

Answer 11

My approach is to code for firefox, opera, and the other non Microsoft browsers. Once it works in those, i patch up the IE functionality in a separate stylesheet/js file.

Also i usually use a JS library and a CSS framework. 9 times out of 10 i use Jquery and YUI Grids.

Answer 12

Check out Browsershots. It makes screenshots of your sites with various browsers, so you can check it visually. It's kind of slow but it worked for me.

Answer 13

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 14

I check website in FF etc first and then "repair" the site to look ok in IE. Mostly if the code is validated and clean and simple, IE needs only few small edits. I use different stylesheets for IE.I don't recommend using hacks.For javascript use only one library. And yes, browsershots help much.

Answer 15

Use strict doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

If you are using ASP.NET then you should add/change this is your web.config.

<system.web>
 <xhtmlConformance mode="Strict"/>

You should also check out the css compliant adapters. http://www.asp.net/cssadapters/

I have spent hours to make my website display the same across all the browsers and this seems to work. One last suggestion. Check often: don't do too much before you check to ensure all browser display it the same.

Answer 16

Use a JS library, such as ExtJS. This abstracts away the browser-specific aspects of styling.

Is it wrong that it looks different in different browers, as long as it is legible and clean?

Answer 17

Use CSSViewer Extension for firefox, it could help to see some fixes you can do to the code very user-friendly. Use CSS display:block or display:inline-block properties, they are sooo usefull. Margin, padding, height and width will be your friends, sometimes you need to specify these values to see the same thing on many browsers. For fonts i would recommend you to read yahoo yui fonts css stuff.

Answer 18

Okay the best way to follow is to use libraries and pre-written codes. For example : never use JavaScript, instead, use JQuery because it's compatible with all the browsers out there and instead of writing your own theme, use free css themes.

Well it works for me and help me save tons of time. Because on professional market, time means money.

Thanks.

Answer 19

IE7 is no longer a requirement either. It is now a liability with its troubling security. IE8 should support most of what the other browsers do, and the bits it doesn't, don't matter. The experience will be degraded, but if you are using IE in the first place, you have no taste anyway.