How to make website look same on all browsers?

Question

Hi,

I am designing my site on a mac. I used basic formatting and then when i want on to my pc, the wrapper width was too wide. My question is what can i do so that my website looks the same on all browsers/os?

Answer 1

1. Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
2. Understand the standards (e.g. we can't tell if the difference is because of a bug or because you've provided instructions that only make sense for a particular window size)
3. Use them (don't forget to validate the HTML and CSS and to lint the JS)
4. Ensure you engage standards mode
5. Learn about bugs in browsers

Answer 2

You need to do a lot of testing in different broswers, in some cases you need to have different styles to make them cross browser compatiable, broswers render pages differently here is a nice tutorial with some tools to help you.

You should try and stick to the web standards as much as possible.

http://www.cookielabs.com/web-development/tools-to-keep-your-site-cross-browser-compatible/comment-page-1

Answer 3

I'd add a couple of further points to @David Dorward's answer:

1. Validate your (x)html and css, and
2. Use a css reset stylesheet to reduce the impact of differing browser-defaults for padding, font-weight, size, margin, etc... (the reset itself isn't, strictly, necessary, but understanding how, and why, it can help is a useful process in itself).