Newsgroup: it.comp.www.html
Titolo: Bug strano Firefox 3

Salve,
non so se vi e` capitato qualche volta, io sto cercando informazioni 
perche` e` un bug veramente strano.
Ho una ul con dentro 21 li composti cosi`:
<li>
 <a class="box d<?= $i; ?>" href="blablabla">
  <h4><?= $i; ?></h4>
  <div class="details">
   <img src="blablabla.jpg" />
   <h5>Titolo</h5>
  </div>
 </a>
</li>
Il tutto dentro un ciclo for in PHP. Lo so che il codice non e` proprio 
aderentissimo agli standard, ma mi serve per non dover usare js per il 
rollover, che faccio con solo css. :)
Funziona tutto, tranne il diciassettesimo elemento, che sballa 
completamente. Firebug mi mostra un codice cosi`:
<li>
 <a class="box d17" href="blablabla"> </a>
  <h4>
   <a class="box d17" href="blablabla">
    17
   </a>
  </h4>
  <div class="details">
   <a class="box d17" href="blablabla"> </a>
    <img src="blablabla.jpg" />
   </a>
   <h5>
    <a class="box d17" href="blablabla">
     Titolo
    </a>
   </h5>
   <a class="box d17" href="blablabla"> </a>
  </div>
 <a class="box d17" href="blablabla"> </a>
</li>
Cioe` sembra che si accorga che non e` standard e replichi l'a per ogni 
CDATA.
Ma solo per il 17!!
Tutti gli altri browser non danno problemi, nemmeno IE6 (che ne ha altri 
sul rollover...).
Se qualcuno ha qualche indizio prima che infili un jquery per fare lo 
stesso effetto...
Grazie.
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 Ma solo per il 17!!
E' un numero particolare.


 stesso effetto...
no, hai fatto tanto per non usare JS, e ci vuoi mettere jquery!!??
immagino che cmq era gi� caricato sulla pagina, cmq ho una soluzione
alternativa che ti propongo volentieri, prima per� fammi vedere online
com'� fatto il roollover e la pagina, poi ci penso io :)


 anche sul 13 :P
Non lo fa, per quello mi pareva strano. ;P
 
Grazie.
Bye.


 
http://temporary-shop.vernel.it/eventi
inutile dire che da me si vede tutto bene...
un approccio differente e validabile è il seguente:
<li style="position:relative">
 <a class="box d<?= $i; ?>" href="blablabla"
style="position:absolute;display:block;width:100%;height:100%;opacity:0.4;background-color:#000">
</a>
  <h4><?= $i; ?></h4>
  <div class="details">
   <img src="/images/img.png" alt="" />
   <h5>Titolo</h5>
  </div>
</li>
l'esempio l'ho fatto con il css inline, tu te lo converti e sull'hover gli
metti una bella backgroung-image che andrà a coprire l'altra
scusa ho un po' di fretta
spero di essere stato chiaro
caso mai rimedio più tardi....


 spero di essere stato chiaro
Nessun problema. Chiarissimo.
Grazie mille.
Bye.


 Bye.
Cmq vorrei ricapitolare il mio pensiero su questo argomento:
Premesso che ho l'impressione che faccia casino solo a te :P e quindi
volendo puoi lasciare tutto così com'è :)
io vedo le seguenti soluzioni in ordine di preferenza:
1) mettere i vari class nel <li> e renderli position:relative e quindi
contenitori perfetti per un <a> in absolute che grande al 100% può coprire
tutta l'area rendendola “hovereidabile” :)
permettendo eventualmente la soprascrittura dell'immagine e anche un
effetto di "opacità imbrunita" se si vuole (opacity:0.x)
Pro:
- pagina validata
- si possono lasciare i tag <h*> e quello che si vuole a favore di
ragionamenti SEO
- niente JS (non che sia la causa di tutti i mali, anzi, io la penso al
contrario) e quindi librerie talvolta pesanti e tutto ciò che può
conseguire con le possibili disattivazioni (che su un rollover non ci
sarebbero conseguenze...)
Contro:
- il codice HTML può sembrare strano perché è inusuale vedere degli <a>
vuoti
2) lasciare come hai fatto ora, ma abbandonare gli <h*> a favore di tag
come <span> (nativamente inline) e renderli all'occorrenza block o quello
che serve con i CSS per ottenere lo stesso effetto grafico
Pro:
- pagina validata
- niente JS 
Contro:
- meno ottimizzazione per il SEO (che in questo caso potrebbe essere poco
male, visti i contenuti dei suddetti tag...)
3) mettere i li:hover e fottersene di IE6 e “linizzare” solo l'immagine o
non so cosa
Pro:
- pagina validabile
Contro:
- sarà cliccabile solo una parte della cella
- non correttamente funzionante su IE6-
4) fare per tutti l'effetto rollover con JS e compreso il click dell'intera
cella
Pro:
- pagina validabile
- uniformità di comportamento sui browser
Contro:
- implementare contromisure per fare funzionare il click anche su
disattivazione di JS (poco male si mette anche il link <a> dell'immagine
all'interno della cella)
5) mettere i li:hover e mettere in un commento condizionale un JS che
simuli l'hover per IE<=6 ma senza includere SOLO per questa cosa nessuna
mega-libreria, sono 2 righe di codice 2 che non dovrebbero trascinarsi 100k
di libreria: è sufficiente abilitare gli "onmouseover" e "onmouseout" per
quei <li> che hanno un determinato "className" accodandocene un altro...
Pro e Contro: non ne ho più voglia ho già scritto troppo, intanto la
soluzione non mi piace :P
In conclusione
Come avrai notato non ho contemplato nessuna ipotesi di non validazione
della pagina, visto che in questo caso le soluzioni ci sono, IMHO la
validazione deve essere un MUST  :)
E secondo me ho dimenticato almeno un altro paio di soluzioni adottabili,
chi si vuol buttare :)


 Premesso che ho l'impressione che faccia casino solo a te :P
Magari!
L'ho provato su 4 computer diversi (2 Linux e 2 Windows). Purtroppo sono 
tutti aggiornati alla 3.0.6 e non ho potuto provare altre versioni.
Comunque il tutto e` una riprova che l'html va sempre validato. :)
Grazie ancora.
Bye.


 Bye.
De nada e saprai sdebitarti :P
