... dopo un pò di tentativi h trovato questa formula di tags:

<div id="main_search" style="height:300px;border:1px dotted #f33;">
<ul id="nav_result">
<li id="li_result">
<a href="index.php">
<table width="100%" height="2px" cellspacing="0">
<tr>
<td width="20%" >
<img src="./thumb/1/tessera_2009.jpg"></td>
<td width="20%">cucine</td><td width="20%">prova</td>
<td width="10%">&euro; 320</td>
</a>
</tr>
</table>
</li>
<li ...>
....
</li></ul></div>

si IE7 và alla grande ... su firefox invece il tag <a> diventa una riga sottilissima in testa ad ogni <LI> .... ho smanettato con tutte le forme di **DISPLAY:????; **sul tag <a> ma niente !!!

Qualche aiutino ?
thanks

p.s.
le regole del css:
#nav_result{list-style-type:none;}
#li_result{border-bottom:1px dotted #333;
height:100px;
cursor:hand;}
:hover
{background:#E9FFD2;
cursor:hand;}
a
{text-decoration:none;
display:table-row-group;
border:1px dotted #00CC33;}
table
{cursor:hand;}

ehm ... chiedo venia a tutti, era errata la chiusura del tag <a> ...

funziona cmq per chi fosse interessato !!

... ho parlato troppo presto su firefox tutto ok su IE7 anche se clicco l'href non me lo esegue ...

questa è la struttura
<div>
<ul>
<li>
<a>
<table><tr><td></td></tr></table>
</a>
</li>
</ul>
</div>

ho provato a mettere lo z-index del tag <a> a 10 ma niente

Ma se da css imposti: tr hover{background: #ffffff}?

Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.

Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.

@kontrasto said:

Non c'è bisgono di usare una tabella. Basta che dichiari il tag a come elemento di blocco (display:block), e poi lo trasformi in "riga" dandogli larghezza e un po' di padding intorno al testo. Poi l'effetto hover basta che lo assegni ad a:hover.

A grazie bell notizia mi hai dato io nel frattempo aevo risolto sostituendo il <table> con una serie di <div> annidati tutti floattanti a left

cmq avendo una <img> a inizio riga.
Ora è tutto cliccabile tranne la <img> inziale ... trattandosi di una immagine interna ad un <div> posso risolvere con lo z-index ?

thanks

Ehm... non ho capito molto, mi incolli il codice?

[html]<div id="main_search" style="height:auto;">
<ul id="nav_result">
<li id="li_result">
<a href="pagina.htm">
<div style="width:100%;border:0px dotted #f33;cursor:hand;">

<div id="div_task_photo">
<img src="./my_inc/annunci/thumb/1/tessera_fiv_2009.jpg" width="100px">
</div>
<div id="div_task_categoria">cucine</div>
<div id="div_task_descr">prova...</div>
<div id="div_task_marca"></div>
<div id="div_task_prezzo">€ 3200.00</div>

</div>
</a>
</li>
</ul>
</div>
[/html]

Scusa se mi permetto ma è un gran casino sto codice

Io inizialmente non mi ero accorto che avessi più di un elemento nella riga. Nell'<a> non ci può mettere tutta 'sta roba, mica è un distributore di caramelle :). L'effetto hover lo puoi ancora avere, ma che tutta la riga (che poi non è più una riga visto che hai tolto le tabelle) sia linkabile, no.

Dovresti scegliere quale degli elementi vuoi far funzionare come link, o magari puoi fare ogni elemento come link ma li devi mettere tutti in <a> diversi.

Se mi spieghi meglio come vuoi che sia il risultato finale (senza parlare di codice) provo ad aiutarti.

... certo che te lo spiego ci mancherebbe

Io sostanzialmente ricavo da una query dei risultati, che vorrei mostrare un rigo sotto l'altro, dove ogni rigo a sua volta dovrà contenere una immagine sulla sinistra e a seguire sei valori .... tutta la riga chiaramente la vorrei cliccabile.

I (div) del mio codice sono tutti float:left e con width & height impostate così da non far andare a capo il contenuto di un singola riga !!

grazie

Ciao,

non puoi fare in modo che tutta la riga sia cliccabile. Devi scegliere uno degli elementi all'interno della riga (magari l'immagine) e fare in modo che cliccando quell'elemento linki alla pagina che vuoi far aprire.

Invece puoi mantenere l'effetto hover su tutta la riga, applicando nei CSS l'effetto li:hover (però su IE6 non funzionerebbe perchè supporta le pseudo classi solo per gli <a>).