problema cross browser

[music_ale]

Salve a tutti, ho un problema con il seguente codice. Questa è una pagina che mi serve per visualizzare dei dati in formato tabellare. In più c'è una serie di link in testa alla tabella che mi permettono di cambiare i dati da visualizzare.
Questo codice funziona bene su internet explorer e chrome, ma non su firefox. Però non riesco a capire perché.

Lo script originario serve a farmi cambiare i dati per ogni giorno della settimana, mentre in qeusto caso per semplificare ho gestito solo due giorni.

<?php
function showEvents($day, $evento) {
		
	echo '<table style="margin-top: 12px; margin-bottom: 20px">';
		echo '<tr>';
			echo '<td style="padding: 10px">Ora</td>';
			echo '<td style="padding: 10px">Nome programma</td>';
			echo '<td style="padding: 10px">Descrizione</td>';
		echo '</tr>';
	
	$values = $evento[$day-1];
	
	for($i=0; $i<count($values); $i++) {
		
		$vars = $values[$i];
	
		echo "<tr>";
			echo '<td style="padding: 10px">' . $vars["fascia_oraria"]  . '</td>';
			echo '<td style="padding: 10px">' . $vars["nome_programma"] . '</td>';
			echo '<td style="padding: 10px">' . $vars["descrizione"]    . '</td>';
		echo "</tr>";
	}
	echo '</table>';
}
?>

<script language="javascript" type="text/javascript">
function openDiv(id) {
	
	var divsArray = new Array();
	var aArray = new Array();
	
	aArray[0] = document.getElementById("lun");
	aArray[1] = document.getElementById("mar");
			
	divsArray[0] = document.getElementById("lunBody");
	divsArray[1] = document.getElementById("marBody");
			
	switch (id) {
		
		case "lun":
			hideAll(aArray, 0, divsArray);
			highlightElem(id, divsArray[0]);
			break;
		
		case "mar":
			hideAll(aArray, 1, divsArray);
			highlightElem(id, divsArray[1]);
			break;
	}
}

function highlightElem(id, divElem) {
	document.getElementById(id).className = 'submenu_sfondo_S';
	divElem.style.display = 'block';
}

function hideAll(aArray, index, divsArray) {
	var i=0;
	
	for (i=0; i<divsArray.length; i++) {
		if (i != index) {
			aElem = aArray[i];
			aElem.className = 'submenu_S';
			divElem = divsArray[i];
			divElem.style.display = 'none';
		}
	}		
}
</script>

<style type="text/css">
.submenu {
	height: 22px;
	width: 993px;
	float: left;
}


.submenu_3liv_all {
	float: left;
	height: 400px;
	width: 993px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	display:none;
	
}

.submenu_S {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	float: left;
	padding:  5px 5px 5px 5px;
	height: 16px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;
}

.submenu_sfondo_S{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	float: left;
	padding:  5px 5px 5px 5px;
	height: 16px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;	
	color: #000000;
	display: block;
	background-color: orange;
	text-decoration: none;
}
</style>

<div id="titolo" style="margin-bottom: 15px; font-weight: bold; font-size: 18px; text-align: center">
Settimana corrente
</div>

<div class="submenu" style="margin-bottom: 20px">
  Luned&igrave;
  Marted&igrave;
</div>

<div id="lunBody" style="display: block">
<?php 
$evento = $this->events;
showEvents(1, $evento);
?>
</div>

<div id="marBody" style="display: none">
<?php 
$evento = $this->events;
showEvents(2, $evento);
?>
</div>

[ResianTaxidrive]

potresti togliere tutto quello che non è html o css?

[music_ale]

<style type="text/css">
.submenu {
	height: 22px;
	width: 993px;
	float: left;
}


.submenu_3liv_all {
	float: left;
	height: 400px;
	width: 993px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	display:none;
	
}

.submenu_S {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	float: left;
	padding:  5px 5px 5px 5px;
	height: 16px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;
}

.submenu_sfondo_S{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	float: left;
	padding:  5px 5px 5px 5px;
	height: 16px;
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;	
	color: #000000;
	display: block;
	background-color: orange;
	text-decoration: none;
}
</style>

<div id="titolo" style="margin-bottom: 15px; font-weight: bold; font-size: 18px; text-align: center">
Settimana corrente
</div>

<div class="submenu" style="margin-bottom: 20px">
  Lunedì
  Martedì
</div>

<div id="lunBody" style="display: block">
// qui ho una tabella con tre colonne e una serie di righe (l'unica proprietà è padding: 10px)
</div>

<div id="marBody" style="display: none">
// qui ho una tabella con tre colonne e una serie di righe (l'unica proprietà è padding: 10px)
</div>

Ho dimenticato di dire che questo comportamento avviene dentro Joomla...ho provato a fare un file a parte e anche su Firefox si comporta bene

[ResianTaxidrive]

ma allora c'è qualche css di joomla che influenza il tutto.

[music_ale]

eh ma come ho detto all'inizio, su IE e chrome funziona, su firefox no.
Quindi devo vedere i css associati al template che uso?

[ResianTaxidrive]

sì per appunto, se hai detto che quello che hai postato qui funziona bene anche su ff, è quello che non hai postato che influenza e cioè i css di joomla.

[music_ale]

allora, cambio domanda...conosci per caso qualche sito dove viene spiegato bene come utilizzare firebug?

[ResianTaxidrive]

bah non è che sia così complicato. Ce lo hai già installato?

[music_ale]

si, ma non l'ho mai usato

[ResianTaxidrive]

clicchi col tasto dx del mouse su un elemento qualsiasi della pagina a poi clicchi "analizza elemento". Ti si aprono due finestre, a sinistra c'è l'html esploso con evidenziato l'oggetto da te cliccato e a dx ti dice tutti gli stili che ha quell'oggetto (e anche il file su cui c'è scritto quel particolare stile). Vedi che sulla sinistra puoi cliccare su qualsiasi tag e a dx ti viene fuori tutto quello che influenza quel tag.

Sulla destra puoi anche modificare i valori e vedere subito il risultato del cambiamento, naturalmente è solo un preview, le modifiche non avvengono per davvero.