Firefox e link non cliccabili

[felix79]

Ho un layout formato da due div affiancati, nel primo di sinistra c'è del testo, nel secondo (a destra) delle immagini (cliccabili per vederle ingrandite). Entrambi i div hanno larghezza fissa. Il div sulla destra ha un float: right.

A livello di costruzione del layout non ho problemi. Con IE, tuttavia, per un bug conosciuto, il testo contenuto nel div di sinistra tende a volte a scomparire in fase di rendering. Per ovviare a tale inconveniente ho inserito un position: relative per il div in questione.

Adesso però, è sopraggiunto un problema con Firefox! Quel position: relative, infatti, mi rende non cliccabili le immagini poste nel div di destra. Le foto si vedono tranquillamente, ma quando ci passo sopra col mouse, il puntatore rimane a forma di freccia, come se non fosse impostato alcun link per l'immagine.

Si tratta di un bug conosciuto di Firefox? C'è un modo per risolvere il problema?

[Mich_]

Cosi` ad occhio ho l'impressione che hai sbagliato qualcosa.

In linea di massima per ovviare ad un errore, non conviene inserirne un altro; comunque posta il il link oppure il coidce HTML e CSS (eventualmente solo quello significativo), che forse qualcuno capisce cosa succede.

[felix79]

Beh non è che ho inserito un altro errore, quello del problema nel rendering del testo con IE è un bug documentato, come documentata è la soluzione di inserire position:relative.

Mi sono accorto di aver descritto male il layout, ma comunque cambia poco: i due div sono contenuti in un altro div a larghezza fissa (che sarebbe lo "spazio" in cui costruire il layout). Per il div di sinistra, quello con il testo, non ho definito alcun width, per quello di destra (con le foto) la larghezza è impostata a 210px.
Riporto il codice significativo:

CSS

#box { width: 772px; margin: auto; text-align: left; position: relative; }
.paragrafo { position: relative; font-size: 14px; text-indent: 10px; padding: 10px 8px; text-align: justify; }
#contenitoreFoto { float: right; width: 210px; text-align: center; padding: 10px 8px 0px 8px; }
.foto { width: 200px; height: 150px; margin: 0px auto 10px auto; border: 1px solid #000000; height: auto; }
.foto img { border: 0; }


XHTML

<div id="box">
<div id="contenitoreFoto">
<div class="foto">[img]foto1.jpg[/img]</div>
<div class="foto">[img]foto2.jpg[/img]</div>
<div class="foto">[img]foto3.jpg[/img]</div>
</div>
<div class="paragrafo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi varius, nunc sed ultricies laoreet, quam tortor sagittis lectus, eget consequat pede dui non urna. Vestibulum molestie. Nam eget sem. Quisque libero sapien, molestie at, tristique sed, dictum at, sem. Aenean convallis nibh sit amet dui. Nullam interdum quam sit amet dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel massa sit amet sem pellentesque porttitor. Nullam odio dolor, tristique sagittis, laoreet sit amet, mattis id, turpis. Quisque lorem eros, molestie in, ullamcorper elementum, dignissim in, urna. Vestibulum porta. Ut leo lorem, tincidunt at, hendrerit sed, luctus non, mauris.</paragrafo>
</div>


Puoi trovare un esempio a questa pagina. Come vedi la prima immagine non è cliccabile, mentre le altre 2 sì. La spiegazione è che il testo supera in altezza quella della prima immagine, rendendola di fatto non cliaccabile.

[Mich_]

Io vedo un grave errore di sintassi; manca la chiusura di un <div>.
Infatti non esiste il tag <paragrafo> in XHTML (potrebbe esistere in XML, ma non e` questo il caso) e quindi non ha senso neppure la sua chiusura.

Poi io scriverei addirittura in XHTML Strict, per cui il testo non puo` stre direttamente in un <div>, ma questo e` un problema diverso.

PS: un validatore di codice (tipo validatore HTML o validatore CSS ti avrebbe trovato l'errore.

[felix79]

Sì ok ho sbagliato a riportare il codice
Si trattava di una pagina appositamente realizzata per documentare il problema, e creandola mi sono confuso scirvendo </paragrafo> al posto di </div>

Ho corretto l'errore, alla pagina di prima puoi vedere lo stesso problema. La correzione del tag non ha comportato soluzioni: la prima immagine rimane comunque non cliccabile. Ho passato il codice al validatore del w3c senza riscontrare errori. La mia versione di Firefox è la 1.5.0.2 (credo sia l'ultima)

[The knight]

fai due float left per i due div "contenitorefoto" e "paragrafo" oppure usa "position: absolute per entrambi"

[Mich_]

prova a usare uno z-index piu` alto nel blocco #contenitoreFoto.
Magari e` solo che quel blocco si trova sotto l'altro (che in effetti viene definito dopo)

[The knight]

Originariamente inviato da Mich_
prova a usare uno z-index piu` alto nel blocco #contenitoreFoto.
Magari e` solo che quel blocco si trova sotto l'altro (che in effetti viene definito dopo)

su un float non và lo z-index, deve usare position:relative o absolute

[felix79]

Originariamente inviato da The knight
fai due float left per i due div "contenitorefoto" e "paragrafo" oppure usa "position: absolute per entrambi"

Avevo già provato soluzione dei due float: left, ma mi sono accorto che non impostando la larghezza fissa per il div paragrafo, il layout non viene come desidero. Il div paragrafo infatti, in mancanza di un width esplicito, tende ad occupare tutto lo spazio disponibile, obbligando il dive contenitoreFoto a posizionarsi sotto di esso. La soluzione sarebbe infatti di impostare un width per il div paragrafo, ma vorrei evitarlo.

Ho invece evitato la soluzione del position: absolute perché ho letto in giro che garantirebbe poca compatibilità con i diversi browser. E' vero?

[felix79]

Per spiegare meglio perché ho evitato le due soluzioni proposte da the knight ho aggiornato la pagina. Quello che a me serve, come si può vedere, è che il testo occupi l'intero spazio disponibile se supera l'altezza del div delle immagini. Perché ciò avvenga, devo necessariamente evitare di esplicitare il width per il div paragrafo (quello col testo). Ma così facendo, utilizzando due float left le immagini si posizionerebbero comunque sotto al testo, come se non fosse impostato alcun float.

Questo invece è il thread dove Mich sconsiglia di utilizzare position: absolute per non andare incontro a problemi di compatibilità tra browser.