Visualizzazione errata background-image su tbody

[Desh]

Preciso che l'errore si presenta solo utilizzando Chrome o con la "visualizzazione compatibilità" di IE8.

Questo è il codice css:

tbody.blue_mid_bg
{
	background:url(../img/blue_mid.jpg);
	background-repeat:repeat-y;
	background-position:left;
}
tfoot.blue_bot_bg
{
	background:url(../img/blue_bot.jpg);
	background-repeat:no-repeat;
	background-position:left;
}

Mentre per la parte HTML:

<table align="center" width="778" cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr><td colspan="2" align="center" background="img/blue_reg_top.jpg"></td></tr>
	</thead>
	<tbody class="blue_mid_bg">
		<tr>
			<td align="left" >asd</td>
			<td align="left"><input name="asd" type="text" /></td>
		</tr>
		<tr>
			<td align="left" >asd2</td>
			<td align="left"><input name="asd2" type="text" /></td>
		</tr>
		<tr>
			<td align="left" >asd3</td>
			<td align="left"><input name="asd3" type="text" /></td>
		</tr>
	</tbody>
	<tfoot class="blue_bot_bg">
		<tr><td colspan="2" align="center" height="28"></td></tr>
	</tfoot>
</table>

Quello che ottengo su Chrome è che nel tbody l'immagine di sfondo si ripete in entrambi i td invece di essere unica per tutta la larghezza della tabella. Ottengo lo stesso risultato se lo sfondo lo associo ad ogni tr invece che al tbody.

Se qualcuno ha idea sul come ovviare a questo problema gliene sarò grato. Escludendo ovviamente la possibilità di dividere in due lo sfondo ed associarlo ai singoli td.

Grazie Mille!!!

[Prill]

Anche con IE7 e con Safari. Ricercando in rete una qualche soluzione per Explorer (ho la versione 7) si trova:

td { background-position:expression(-this.offsetLeft + " " + -this.offsetTop); }

ma resta il problema per Chrome e Safari, sui quali non so aiutarti e forse potranno dirti altri, ma c'è scarso supporto nei browser per tbody.
Se invece impostassi lo sfondo sulla tabella?

[Desh]

Lo sfondo sulla tabella non lo posso mettere perché sono tabelle dalla lunghezza variabile, ed è uno stile che va su molte tabelle.

Cercando un po' in rete ho visto che la cosa è stata segnalata come "falla" di Chrome: http://code.google.com/p/chromium/is...etail?id=35697 . Se qualcuno avesse un'idea di come aggirare il problema senza grossi stravolgimenti gliene sarei grato. Grazie ancora.

[fcaldera]

che succede se metti position: relative ad esempio al tfoot ?

[Desh]

Non cambia niente.

[Prill]

display:block; per il tbody fa scomparire il problema sia con Safari che con Chrome, prova un po'

[Desh]

Originariamente inviato da Prill
display:block; per il tbody fa scomparire il problema sia con Safari che con Chrome, prova un po'

Grazie mille funziona! Però ora mi sposta tutti gli elementi sulla sinistra (avendo l'allineamento al centro)

Farò qualche prova con i css per vedere se risolvo.

[Prill]

dovresti fissare la larghezza per le due colonne

[Desh]

Perfetto adesso! Grazie mille ancora... mi ero già visto a dover modificare tutte le tabelle.

Giusto per completezza nei riguardi di chi dovesse leggere in futuro il thread, questa soluzione non funzione per IE7 (o modalità compatibilità di IE8).

Grazie!!!

[Prill]

per IE funziona (almeno con IE7) il codice al primo post, trovato in rete. Ciao