Firefox-Safari-Internet Explorer issues
 

I have edited my css file to look the way I want and it looks great in Safari. But it looks completely different in IE and Firefox! All three look different! How can I make sure that the changes I make to the CSS file are shown in all three?!

Here is my testing site:
http://server5.alwayswebhosting.com/~mountain/store/home.php

The only way i know is to install all 3 browsers and every time you make a change to check it on all 3 :P sucks eh

But there has to be something wrong with the way the browsers are actually reading the CSS syntax. Does anyone know which tags Firefox and IE are reading differently than Safari? I have no idea what changes to make in order for the problems to be fixed.

Unfortunately, each browser has different 'quirks' with certain CSS elements. You just need to test and re-test on each browser until you get it working the way you want.

Hi,

You have to test at every time, you find the relevant tags that is suitable for all the browsers.

Important notes:

1) Try to use Padding and margin for alignment. If you find that padding does't support well by Firefox, use Margin. But, note that margin is not well supported by IE. So, here is the trick...

BODY
{
margin-top:10px; /* Comaptible for FireFox */
}

* html body
{
margin-top:10px /* compatible for IE and only recognized by IE, not Firefox */
}

2) Try to avoid using tables as much as possible.

3) If you have any hidden fields, IE creates some whitespace for this, But, it is not visible. But, Firefox does't make any changes. So, Take care of hidden fields when the white space is important in concern with the designing.