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...

[eee]

Nessuno puo' aiutarmi?

[eee]

...

[Mich_]

Premesso che il Web non e` la stampa (non puoi impaginare in un modo che vada bene per tutti e che sia uguale in tutti i browser), di solito si fa un CSS che vada bene per i browser conformi, e poi si corregge per IE6 e IE7 tramite commenti condizionali.

In linea di massima se si fanno le cose seguendo le regole, il risultato e` equivalente in tutti i browser e tutte le risoluzioni (ho scritto equivalente, non uguale: vuol dire che non ci si accorge che la cosa e` diversa, finche` non si carica la stessa pagina nei due browser).

Nel tuo codice ci sono alcune cose che pososno venir interpretate in modo diverso tra i vari browser:

1. Hai dato display:inline al[*], e poi display:block al <a> in esso contenuto: questo e` un errore (e browser diversi risolvono gli errori in modo diverso);
e comunque non e` una buona idea trasformare inline un oggetto che nasce di tipo block. Se e` per affiancre i blocchi, si usa il float.

2. Hai usato immagini diverse per il rollover: l'effetto e` brutto (impiega del tempo prima di vedersi l'effetto la prima volta): prova con un rollover diverso:
I fondamenti del rollover grafico: immagini, sprite e text-replacement
Fast Rollovers Without Preload
Menu grafici con rollover e preload via CSS

Rollover creativi