Problema con posizionamento di un menu CSS

[eee]

Ciao,

ho un problema con il poizionamento di un menu fatto con CSS. Per ora l'ho testato solamente in Macintosh e gia' la posizione che do' al menu nel foglio di stile viene letta in modo diverso da Safari e Firefox. QUI c'e' l'esempio.

Questo e' il pezzo di CSS che riguarda il menu:

/* menu */



#menu {
        margin-top:-201px;
        margin-left:-40px;
        }

#menu ul
{
    list-style: none;
    overflow: hidden;
    height: 50px;
    width:907px;
    margin: 0;    
}
#menu li
{
    display: inline;
    list-style: none;
    
}
#menu li a
{
    display: block;
    float: left;
    background-position:bottom;
    
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}
    
#menu li a.m_home {
        background-image: url(img/m_home.gif);    
        background-repeat:no-repeat;
        width: 151px;
        height: 50px;
        }
        
#menu li a.m_home:hover {
        background-image: url(img/m_home_.gif);
        cursor: pointer;
        }
        
#menu li a.m_about_us {
        background-image: url(img/m_aboutus.gif);    
        background-repeat:no-repeat;
        width: 151px;
        height: 50px;
        }
        
#menu li a.m_about_us:hover {
        background-image: url(img/m_aboutus_.gif);
        cursor: pointer;
        }
            
#menu li a.m_services {
        background-image: url(img/m_services.gif);    
        background-repeat:no-repeat;
        width: 151px;
        height: 50px;
        }
        
#menu li a.m_services:hover {
        background-image: url(img/m_services_.gif);
        cursor: pointer;
        }
            
#menu li a.m_gallery {
        background-image: url(img/m_gallery.gif);    
        background-repeat:no-repeat;
        width: 151px;
        height: 50px;
        }
        
#menu li a.m_gallery:hover {
        background-image: url(img/m_gallery_.gif);
        cursor: pointer;
        }
        
#menu li a.m_fees {
        background-image: url(img/m_fees.gif);    
        background-repeat:no-repeat;
        width: 151px;
        height: 50px;
        }
        
#menu li a.m_fees:hover {
        background-image: url(img/m_fees_.gif);
        cursor: pointer;
        }
        
#menu li a.m_contact_us {
        background-image: url(img/m_contactus.gif);    
        background-repeat:no-repeat;
        width: 152px;
        height: 50px;
        }
        
#menu li a.m_contact_us:hover {
        background-image: url(img/m_contactus_.gif);
        cursor: pointer;
        } 

E questo e' il codice html del menu stesso:

                <div id="menu"> 
                    <ul> [*] 
                        [url="index.html"][/url] [*] 
                         [url="about_us.html"][/url] [*] 
                         [url="Services.html"][/url] [*] 
                         [url="gallery.html"][/url] [*] 
                         [url="fees.html"][/url] [*] 
                         [url="contact_us.html"][/url] [/list]
                </div> 

La mia domanda e': e' normale che faccia cosi? Devo per forza fare diversi fogli di stile per tutti i brawser Mac/Wndows/Firefox/Safari/Explorer o c'e' un modo per dare a tutti i browser delle coordinate da cui partire per calcolare la posizione x e y?

Spero che qualcuno possa aitarmi...