Newsgroup: it.comp.lang.javascript
Titolo: [un pochino OT]: CSS, JS ed animazione tasti...

Buon JS a tutti,
ho un problemino tra NN ed IE usando i CSS e JS
Ho due blocchi DIV impostati in cima alla pagina su due CSS diversi, uno a
sinistra ed uno a destra.
Nel DIV di sinistra c'è un tasto che cambia al passaggio del mouse (novità
assoluta! :-)), nel DIV di destra un'immagine fissa.
SU IE tutto funziona perfettamente. Su NN l'animazione al passaggio del
mouse funziona solo se i due blocchi DIV non sono in parallelo in
orizzontale, come se  uno dei due mascherasse l'evento onMouseOver()
al'altro. Mi spiego meglio: se lascio i CSS così come riportato nella pagina
più sotto (top del CSS pleft = 5 e top del CSS ptitles = 5), IE va e NN no.
Se in uno o nell'altro CSS imposto il 'top' ad es. a 300 invece funziona
anche su NN.
Un'ulteriore curiosità è data dal fatto che se scambio le classi ai DIV
('ptitles' al bottone animato e 'pleft' all'immagine fissa) il tasto animato
finisce ovviamente a destra, ma funziona su tutti e due i browser.
Note:
- nel CSS ho dovuto mettere  float:right; altrimenti NN non lo posiziona a
destra, e right:5px; altrimenti è IE che non lo posiziona a destra. W la
compatibilità :-(
- per i più attenti: Che c'entra JS con tutto questo? E qui scatta il quasi
OT: la pagina è generata quasi tutta dinamicamente con JS. Qui ho messo solo
il codice generato relativo al problema per evitare appesantimenti.
Qualcuno ha una spiegazione di questo fenomeno? Ovverossia, dove ho
sbagliato?
Ringrazio in anticipo l'eventuale solutore (soluzionario? solvente?
soluziante? solutazionario?) del quesito. :-)
Segue il codice della pagina
Fabrizio
<html>
<HEAD>
<STYLE>
<!--
div.pleft    { position: absolute; float: left; top: 5px;  width: 100px;
               height: 50px; z-index: 1; background-color: #66FF99 }
div.ptitles  { position: absolute; float:right; top: 5px; right: 5px;
height: 100px; width: 100px;
               z-index: 2; background-color: #FFFF99 }
//-->
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="pleft">
<TABLE border="0" height="50">
<TR>
<TD><A href="linkName.htm"
onMouseOver="document.images[0].src='BtnDown.gif'"
onMouseOut="document.images[0].src='BtnUp.gif'">
<IMG border="0" src="BtnUp.gif" ></A></TD>
</TR>
</TABLE>
</DIV>
<DIV CLASS="ptitles">
  <TABLE>
    <TR>
      <TD><IMG border="0" src="images/Image01.gif" width="100"
height="100"></TD>
    </TR>
  </TABLE>
</DIV>
</BODY>
</html>

 soluziante? solutazionario?) del quesito. :-)
Ho dato un occhiata (veloce) al codice.
Direi che la parte incriminata e' senza dubbio il "float" che hai inserito
nei CSS.
NS ogni tanto sbarella quando si utilizzano determinate caratteristiche dei
CSS (rischi anche di far crashare il client.. poi uno si fa un po'
d'esperienza e riesce ad evitare 'sti casini..).
Non so, infatti, se hai provato a fare il "resize" della tua pagina che hai
postato poc'anzi, su una finestra di Netscape.. Va un po' in cianfanella.
^__^
Ti consiglio di trovare quindi una soluzione alternativa a quella a cui stai
attualmente lavorando, in modo da evitare l'attributo float.
Non so esattamente cos'e' che ti serve realizzare, ma se vuoi posizionare
due layer uno a sinistra ed uno a destra della pagina, potresti, ad esempio:
a) Fare una tabella con width 100%, e posizionare i suddetti layer con
attributo "position:relative" in celle apposite allineate la prima a
sinistra e la seconda a destra.
b) Recuperare la larghezza della pagina tramite JS e posizionare, da codice
Javascript, il layer di destra. Quello a Sx non importa, perche' sara'
sempre orientato verso l'origine (e quindi avra' una left fissa, dipende
dalla distanza che vuoi dargli dal bordo), mentre quello a destra avra' una
left uguale a LarghezzaPagina-DistanzaDalBordo.
Per recuperare la larghezza in IE
    document.body.offsetWidth;
In NS
    self.innerWidth
Spero d'esserti stato d'aiuto almeno un po'. Ciao!

Grazie ZER0, mi ero veramente infognato con gli allineamenti dei CSS e non
avevo pensato ad altre soluzioni...
La tabella funziona benissimo, i risultati (er sito funzionante!) saranno
comunicati prossimamente sul NG. ^__^
Ciao!

 comunicati prossimamente sul NG. ^__^
Aspettiamo, allora. :)