Differenza di posizionamento livelli sui browser

[fagiolo]

Salve a tutti,
mi interesso da poco di edizione web e sto cercando di imparare alla meglio i potenti CSS.
nel mio caso ho un livello con un immagine sulla quale ho messo sopra altri tre livelli che appariranno in funzione delle zone dove passa il mouse,praticamente un classico rollover ma con i livelli.
Il problema nasce dalla diversa visualizzazione dei browser, anche se piazzo i livelli precisi dove devono apparire, con IE ho un piccolo slittamento e con FF un'altro slittamento da tutta altra parte.

Che ne pensate?
dove toppo?

grazie in anticio

[Mich_]

Bella descrizione, ma finche` nonc i fai vedere un po' di codice (HTML + CSS) oppure un link e` difficile che riusciamo a capire a fondo cosa hai fatto ed eventualmente consigliarti come rimediare.

[fagiolo]

scusate ecco il codice Html:

<div id="navigazione">



[img]Immagini/vignette.gif[/img]
<map name="Map" id="Map">

<area shape="poly" coords="25,250,271,213,248,5,4,23" href="Simone.html" onmouseover="MM_showHideLayers('Layer3','','show') " onmouseout="MM_showHideLayers('Layer3','','hide')" />
<area shape="poly" coords="208,251,453,270,473,53,249,29,270,212,211, 223" href="Stefano.html" onmouseover="MM_showHideLayers('Layer4','','show') " onmouseout="MM_showHideLayers('Layer4','','hide')" />
<area shape="poly" coords="422,48,472,52,455,230,666,237,668,17,431,5 " href="Riccardo.html" onmouseover="MM_showHideLayers('Layer5','','show') " onmouseout="MM_showHideLayers('Layer5','','hide')" />
</map>
</p>
<div id="Layer3" style="position:absolute; left:111px; top:207px; width:66px; height:2px; z-index:1; visibility: hidden;">[img]Immagini/rollsimone.gif[/img]</div>
<div id="Layer4" style="position:absolute; left:292px; top:231px; width:38px; height:14px; z-index:1; visibility: hidden;">[img]Immagini/rollstefano.gif[/img]</div>
<div id="Layer5" style="position:absolute; left:510px; top:206px; width:51px; height:3px; z-index:1; visibility: hidden;">[img]Immagini/rollriccardo.gif[/img]</div>
</div>

e quello css :

div#container{
position: relative;
width:760px;
margin: 0 auto;
background: url(Immagini/sfondo.gif) repeat-y top right;
height: 800px;
font-family: Arial, Helvetica, sans-serif;
}
#navigazione {
position: absolute;
width: 611px;
left: 31px;
top: 123px;
height: 261px;
z-index: 1;
font-family: "Times New Roman", Times, serif;
}

grazie in anticipo!


p.s.
ma come si fa ad aggiungere i codici nel riquadro tratteggiato?

[Mich_]

Anzitutto ti chiederei di presentare un codice piu` pulito, togliendo gli stili dal codice HTML e inserendoli nel CSS: questo ti serve anceh per poter agire sulla pagina.

Secondo inseisci il codice tra i tag [ code ] e [ /code ] (senza gli spazi), altrimenti e` difficile da capire Sopra il campo di inserimento esiste anche un bottone "#" oppure "PHP" che fa il lavoro un po' piu` automatico (ma forse meno pratico)