What is best way to create a weblayout which is cross browser compatible?

Question

A design is a very important part of a web site. But making a layout cross browser compatible is very tough task.

What is the easiest way for this?

Answer 1

You may want to read about browser inconsistencies if you have a reason to be concerned. Other than that, I would not assume you have a problem unless you observe your pages being rendered differently across browsers. You should follow ANeves' advice and design in a browser other than IE and then test your pages as you develop.

You can use the tools located here in an article entitled "Cross-Browser Testing: A Detailed Review Of Tools And Services" to test that your pages in fact function correctly in different browsers.

Answer 2

The way I do it is by writing it and testing in Firefox, and each change I make I run it in IE. A lot of the times it will be different, but if you keep the changes small and isolate them then each one should be work-aroundable.

After it is completed, I check it in Safari and Chrome, and 99% of the time it's fine.

Also try to avoid tables if you can, learn to use CSS properly and it will save you a lot of time in the future.

Answer 3

I actually think it´s not that big of a problem. A very good starting point: CSS Mastery

Answer 4

Don't recrate the wheel. Try finding a website example that works in all browsers and check out it's code. It might help you out a lot. For instance, if you want to develop just a layout (header, footer, sidebars, content, containers, menus and things like this)...I sincerely suggest you try different options available online.

For example:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm http://layouts.ironmyers.com/

You can find a lot of help for this online. That's only for a LAYOUT. I'm not sure about Visual Effects, I have to fight with each design every time I create a new one.
What works for me is to re-use the things that have worked for me in the past.