Website Design - Browser Compatibility

[saudilawyers]

I am very new to web design and i have this current project that i am working on right now.

My task is to have the website, [example.com], compatible with all browsers and platforms, i.e IE, Chrome, Firefox, Safari, including mobile devices, etc.

My problem is that the design lay-out of the website changes and varies with each browsers, especially with the alignment of the menus and buttons. Is there a way that i could fix this issue without having to calibrate the website for each browsers?

I really appreciate your help and feedback on this.

[edited by: brotherhood_of_LAN at 11:44 am (utc) on Nov 13, 2012]
[edit reason] avoid mentioning personal sites when the question doesnt need it... thanks [/edit]

[limbo]

You need to employ a CSS reset. And also validate your HTML/CSS

This will help solve some bugs - others come with experience of knowing what will and won't work for each browser. Internet Explorer in particular will make you go grey.

Lastly you should also try and test you site on Mac - fonts render truer on OSX than windows so the spacing of letters is wider. This can throw out a layout too.

[saudilawyers]

Thank you for the reply limbo. If I make a CSS reset, do I need to re-code everything? Some recommended to use responsive lay-out or fluid design to fix this.

[limbo]

Responsive Layouts are not going to sort browser bugs. Validating your CSS/HTML and using a reset will.

Responsive / mobile first design, will however, enable your site to work on a variety of screen sizes an resolutions - but takes a lot more work (like another 50% on top of the design/front-end budget).