incompatibilità con mozilla

**lucazac** · 11-07-2006, 17:37

Il seguente codice funziona perfettamente con IE, con Mozilla il comportamente è invece del tutto anomalo, teoricamente sotto ciascuna delle due righe azzurre si dovrebbero aprire al click due righe di dettaglio
Non mi sembra di aver utilizzato tag particolari tuttavia non riesco a capire questo disallineamento nei comportamenti.
Qualche buon anima può aiutarmi...

Ho controllato anche i thread precedenti ma si parla solo di questo problema relativamente al tab <tr>

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Nascondi { display: none; } 
.Mostra { display: inline; }
</style>
<script language="JavaScript">
function showBody(id) {
	var catBody = document.getElementById(id);	
	if (catBody.className == "Nascondi") { 
	    catBody.className = "Mostra";
	    } else {
	    catBody.className = "Nascondi";
	    }
}
</script>
</head>
<body>
<title></title>
<table cellpadding="0" cellspacing="0" border="0" width="400">
	<tbody id="testata1">
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBlu"> TESTATA 1</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 1</td>
	</tr>
	</tbody>
	<tbody id="tb_0" class="Nascondi">
		<tr>
		<td class="TextstdBlu">dettagli 1 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 1 seconda riga</td>
		</tr>
	</tbody>
	<tbody id="testata2">
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBlu"> TESTATA 2</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 2</td>
	</tr>
	</tbody>
	<tbody id="tb_1" class="Nascondi">
		<tr>
		<td class="TextstdBlu">dettagli 2 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 2 seconda riga</td>
		</tr>
	</tbody>
	<tbody id="testata3">
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBlu"> TESTATA  3</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 3</td>
	</tr>
	</tbody>
	<tbody id="tb_2" class="Nascondi">		
		<td class="TextstdBlu">dettagli 3 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 3 seconda riga</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Grazie anticipatamente a chiunque vorrà darmi una mano...

**dvjack** · 12-07-2006, 10:22

secondo me il problema potrebbe risiedere nel tag tbody

su internet ho trovato pareri discordanti:
-funziona solo su IE
-funziona solo su Mozilla
-funziona su tutti i browser di nuova generazione

quindi bho....

Cmq se ho inteso bene il problema, secondo me potresti utilizzare una soluzione del genere:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Nascondi { display: none; } 
.Mostra { display: inline; }
</style>
<script language="JavaScript">
function showBody(id) {
	var catBody = document.getElementById(id);	
	if (catBody.className == "Nascondi") { 
	    catBody.className = "Mostra";
	    } else {
	    catBody.className = "Nascondi";
	    }
	return false;
}
</script>
</head>
<body>
<title></title>
<table cellpadding="0" cellspacing="0" border="0" width="400">
	<tr bgcolor="#E8F1F7">
		<td class="TextstdBlu"> TESTATA 1</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 1
		<div id="tb_0" class="Nascondi">
		<table cellpadding="0" cellspacing="0" border="0" width="100%">
		<tr>
		<td class="TextstdBlu">dettagli 1 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 1 seconda riga</td>
		</tr>
		</table>
	</div></td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBlu"> TESTATA 2</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 2
		<div id="tb_1" class="Nascondi">
		<table cellpadding="0" cellspacing="0" border="0" width="100%">
		<tr>
		<td class="TextstdBlu">dettagli 2 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 2 seconda riga</td>
		</tr>
		</table>
		</div></td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBlu"> TESTATA  3</td>
	</tr>
	<tr bgcolor="#E8F1F7">
	<td class="TextstdBluS">Apri dettagli 3
	<div id="tb_2" class="Nascondi">
		<table cellpadding="0" cellspacing="0" border="0" width="100%">
		<tr>		
		<td class="TextstdBlu">dettagli 3 prima riga</td>
		</tr>
		<tr>
		<td height="5"></td>
		</tr>
		<tr>
		<td class="TextstdBlu">dettagli 3 seconda riga</td>
		</tr>
		</table>
	</div></td>
	</tr>
</table>
</body>
</html>

Spero di aver interpretato bene come volevi visualizzare i dettagli...

**lucazac** · 12-07-2006, 11:12

Avevo risolto in altra maniera. Sembra che mettendo anche le testate dentro ad un TAG tbody. funzioni correttamente anche su mozzilla
Ma anche come proponi tu mettendo i dettagli in un tag DIV funziona sia su mozilla che IE...
Grazie

**Xinod** · 13-07-2006, 02:41

in generale, quando si vuole lavorare con parti di tabella il tbody e' meglio metterlo,
perche' in sua assenza i browser moderni (e seri) lo considereranno lo stesso
mentre i browser "moderni" ma poco seri (=IE) non lo considereranno nell' alberatura DOM,
per evitare fraintendimenti va sempre specificato nell' html

punto 2: parti di tabella, sempre per i browser seri di cui sopra, non vengono mostrati con display:inline o block, ma con valori di display specifici per gli elementi in questione, che sono:
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption

settare il display per questi elementi a inline o block genera effetti collaterali sgraditi
ciao

**lucazac** · 13-07-2006, 08:38

Quindi nel caso del tbody, i settaggi corretti per la proprietà dispaly sarebbero:
inline-table-row-group
block-table-row-group
none-table-row-group ...?

Inoltre al lato pratico quali differenze di comportamento si anno utilizzando il display block piuttosto che inline in questo caso?

Grazie davvero del prezioso aiuto...

**Xinod** · 13-07-2006, 16:15

no, fai un po' di confusione, questi sono gli stili degli elementi

codice:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

quindi per mostrare un thead con i browser veramenti aderenti al w3c devi settare il display a
table-row-group

x nasconderlo usa il solito display:none

non capisco il senso dell' altra domanda:
non e' corretto impostare il display a block, cosi' come impostarlo a inline
quello che fa il browser in risposta e' imprevedibile, in quanto viene fornito un valore per il display cmq errato

ciao

**lucazac** · 13-07-2006, 16:47

Ti ringrazio vivamente...
in effetti dovrei cercare di strutturare meglio le mie conoscenze riguardo l'utilizzo dei CSS

grazie ancora

**lucazac** · 13-07-2006, 17:05

Xinod vista la tua disponibilità provo di approfittarne...

In un vecchio messaggio ho trovato questa parte di codice che avivi postato

function mostra_nascondi(id_riga){
var IE=(window.navigator.userAgent.indexOf('MSIE')>-1)?1:0;
document.getElementById(id_riga).style.display=(do cument.getElementById(id_riga).style.display=='non e')?((IE)?'block':'table-row'):'none';
}

potresti spiegarmi con un commento il codice.
Non capisco assolutamente come sia costruita tale funzione...
quei due punti e punti di domanda che significato hanno??
ammetto che probabilmente mi mancano un po di basi di javascript...

Grazie ancora....

**Xinod** · 13-07-2006, 17:13

il ? usato in quel modo si chiama operatore ternario,
esiste anche in altri linguaggi

quando il risultato di una struttura condizionale e una sola assegnazione puoi scrivere
variabile=(condizione)?valoreSeCondizioneVera:valo reSeCondizioneFalsa;

che equivale a

if(condizione){variabile=valoreSeCondizioneVera;}
else {variabile=valoreSeCondizioneFalsa;}

ciao

**lucazac** · 13-07-2006, 17:45

...grazie ...chiarissimo come sempre!!!

Discussione: incompatibilità con mozilla

Strumenti discussione

Ricerca discussione

Visualizza

incompatibilità con mozilla

Thanks...

grazie...

ancora grazie

Gentilezza...

...grazie

Permessi di invio