hello all
what is the best way to ensure css/layout code works on all browsers?
my css code work on firefox fine but does not work fine on IE
are we have to we test with all browsers? are there any tools for test and show result and if correct my code for all browsers?
The 960grid system works on all browsers, and it is really easy to work with. I like it a lot. I'm a developer, not a designer, so it was easy for me to use and implement properly.
The short answer is yes, to be completely sure it will look the same you need to test with all browsers.
The longer answer is that Firefox, Chrome and Opera all have good standards compliance so if it works in one, it's very likely to work in the others.
IE is a minefield of its own and the differences between IE6, 7 and 8 can be pronounced. I usually try and avoid supporting IE6 altogether now so don't bother to check it and IE8 has an IE7 backward compatibility mode so you can test both 7 and 8 together. If you need IE6, Microsoft provide Virtual Machine images with it installed on XP so you can test against it rather than trying to hack multiple versions of IE onto your machine.
As a final check something like browsershots.org can help you see what it will look like on a wide variety of OS/browser combos.
One thing I found very useful is using a CSS framework like Yahoo's YUI — they have taken the hit of getting stuff working consistently across lots of browsers so you can leverage their work with a bit of additional styling of your own.
SuperPreview is part of the Microsoft Expression Web product. The full version will allow you to check out side-by-side layouts across Opera, Safari, Firefox and Internet Explorer 6-8. A free trial of Expression Web is available.
There is also a free version, SuperPreview for Internet Explorer. This will allow you to see IE6, 7 and 8 layouts side-by-side, much easier than going to the great lengths of installing virtual machines.
Use the strict HTML doctype - that will solve 99% of your problems. You can use the HTML5 doctype, even if you're using HTML4, since it forces standards mode. Put this right at the beginning of the document, before <html> :
<!doctype html>
paolo has a good answer to this question, though i find there are definitely minor differences between chrome and firefox and safari
if you want to view your site as it looks in various version of IE, I would recommend using the IETester application (windows only) http://www.my-debugbar.com/wiki/IETester/HomePage
IETester works pretty well for testing IE6 and IE7 on the same box. It seems like manual testing is necessary. Even Firefox and Chrome will do things differently at times.