problema di browser

**papaveri** · 07-07-2006, 12:35

Salve a tutti, spero di essere nel forum giusto
Allora il mio problema è il seguente
ho dovuto riaggiustare il lyout di alcune pagine di un sito
e facendo un controllo generale mi sono accorta che visualizzando
la stessa pagina con Mozilla Firefox il menu a comparsa, che in explorer appare
quando col mouse passo sopra la parola home nella fascia in alto della finestra,mi appare al di
sotto della fascia bassa(piede)della pagina in una posizione diametricalmente opposta.
Credo che sia proprio un problema di stili, ma non so proprio come rimediare.
Qualcuno mi aiuti!!!!
Invio il codice della pagina ed il codice del file js in cui sono contenute le funzioni richiamate
col mouseover
pagina.asp

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
...........
<link href="newsoft.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<link href="menu_ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script  src="scripts.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--

function out()
	{
	if (window.event.srcElement.className == "titoSpantwo")
				{
				window.event.srcElement.className = "titSpan"
				}
	}
	function over()
	{
	if (window.event.srcElement.className == "titSpan")
				{
				window.event.srcElement.className = "titoSpantwo"
				
				}
	}
	function vai(url)
	{
		window.location=url
	}
	function swap1(elem)
	{
		elem.className = "titoSpantwo"
	}
	function swap2(elem)
	{
		elem.className = "titSpan"
	}


function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body onload="getPageSize()" onresize="getPageSize()" >

<div id="sezione" align="center">
  <table border="0" cellpadding="0" cellspacing="0" class="tab_sezione">
    <tr>
      <td class="td_menu">[img]immagini/index_r2_c2.jpg[/img]</td>
      <td align="left" class="sottosezione">[img]immagini_interne/sez_contatti.gif[/img] 
      titolo</td>
      [il problema è nel rigo seguenti]
      <td><div align="right">[img]immagini_interne/home.gif[/img]</div></td>
    </tr>
  </table>
............
<div>
  
</div>

</body>
</html>

file.js

codice:

var activeLayer = new String(); // ** Variabile Globale. Indica il layer attualmente visibile **
var tim; // ** variabile globale. Indica l'intervallo di tempo di apertura di un layer.
var page = new Object(); // ** variabile globale. Contiene le dimensioni della pagina
	page.X = 0; 
	page.Y = 0; 
	
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
// | Testa la versione del browser utilizzato
// | 3 possibilità:
// |    . Microsoft Explorer
// |    . Netscape versione 4.x
// |    . Netscape versione 6.x
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
function getBrowser()
{
        var typeBrowser = new String();
        typeBrowser = navigator.appName;
        if (typeBrowser == 'Microsoft Internet Explorer')
        {
                // Browser Microsoft
                typeBrowser="explorer";
        }
        else
        {
                if (typeBrowser == 'Netscape')
                {
                        // Browser Netscape
                        var test = new String();
                        test = typeof(document.layers);
                        if (test=="object") 
                        {
                                // Netscape 4.x
                                typeBrowser="navigator4";
                        }
                        else
                        {
                                // Netscape 6.x
                                typeBrowser="navigator6";
                        };
                }
                else
                {
                        // altro tipo di browser
                        typeBrowser="altro";
                };
        };
        return typeBrowser;
};

function showLayer(nomeLayer, x, y)
{
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
// | Visualizza il Layer nomeLayer
// | alle  coordinate  x  e y
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
clearTimeout(tim)
if (activeLayer != "") // ** c'è gia un layer visibile **
		{
			hideLayer(activeLayer);
		};
activeLayer = nomeLayer; // ** memorizza il nome del layer visualizzato **
var temp = new String();
temp = getBrowser();
if (temp=="navigator4" )
	{
	// Browser netscape 4.x
		document.layers[nomeLayer].top=y;
		document.layers[nomeLayer].left=x;
		document.layers[nomeLayer].visibility="show";
	}
	
else
	{
	// Browser Explorer o Netscape 6.x o altro
		document.getElementById(nomeLayer).style.top = y;
		document.getElementById(nomeLayer).style.left = x;
		document.getElementById(nomeLayer).style.visibility="visible";
	}
};

function hideLayer(nomeLayer)
{
	//alert(nomeLayer)
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
// | Nasconde il Layer nomeLayer
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
var temp = new String();
temp = getBrowser();
if (temp=="navigator4")
	{
	// Browser netscape 4.x
		document.layers[nomeLayer].visibility="hide";
	}
else
	{
	// Browser Explorer o Netscape 6.x o altro
		document.getElementById(nomeLayer).style.visibility="hidden";
	};
};

function waitAndClear(nomeLayer)
{
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
// | Attende  un   determinato  intervallo  di  tempo
// | trascorso il quale nasconde il layer "nomeLayer"
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
tim = setTimeout("hideLayer('"+nomeLayer+"')", 700);
};

function getPageSize()
{

// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
// | Legge le dimensioni della pagina
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
var temp = new String();
temp = getBrowser();
if (temp=='navigator4' || temp=='navigator6')
	{
		page.X = window.innerWidth;
		page.Y = window.innerHeight;
	}
else
	{
		page.X = document.body.clientWidth;
		page.Y = document.body.clientHeight;
	};
	if (page.X<775) page.X=775;
	// Aggiustamenti per netscape
	if (temp=='navigator4' || temp=='navigator6')
	{
		page.X = page.X-16;
	}
};

function show(Picture,PictName) {
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
// | Usata per i Rollover di Immagini
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
	document.images[PictName].src=Picture;
};

// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
// Cerca una stringa nella stringa passata in input,
// restituisce True se la trova.
// false altrimenti.
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
function searchInString(stringToFind, stringWhereSearch)
{
	var found;
	var index;
	index = stringWhereSearch.indexOf(stringToFind);
	if (index == -1) {found = false}
	else {found = true};
	return found;
};

// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
// rimpiazza nella stringa "stringToMod" la sottostringa "wordToRem" con la sottostringa "wordToAdd"
// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
function replaceInString(stringToMod, wordToRem, wordToAdd)
{
 var temp1 = new String();
 var temp2 = new String();
 var result = new String();
 var cleaned = new String();
 result = stringToMod;
 if (searchInString(wordToRem,result))
 {
	while ( searchInString(wordToRem,result) )
	{
	 temp1 = result.substring(0, result.indexOf(wordToRem));
	 temp2 = result.substring(result.indexOf(wordToRem)+wordToRem.length,result.length);
	 cleaned = cleaned+temp1+wordToAdd;
	 result=temp2;
	};
 	cleaned = cleaned+temp2;
 }
 else
 {
 	cleaned = stringToMod;
 };
 return cleaned;
};

**Mich_** · 10-07-2006, 10:24

Magari e` proprio un problema di CSS, ma hai postato tutto tranne il CSS.

Meglio sarebbe se potessi postare un link. E` difficile rendersi conto del problema vedendo un listato (cosi` lungo).

**papaveri** · 10-07-2006, 15:04

ti invio il link di una pagina qualunque, tanto il problema si ripropone ovunque in tutte e ti invio anche il codice del file css(menu.css) che dovrebbe contenere il css colpevole, non che il codice del file che produce l'elenco a tendina che deve apparire; eccoli di seguito:
http://www.new-soft.it/atelier982_servizi.asp

codice:

#azienda{
	visibility: hidden;
	position: absolute;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
	
#azienda ul{
	border: none;
	margin: 0px;
	padding: 0px;
}
#azienda li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 1px none #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	width: 177px;
	display: block;
	height: 15px;
	background-color: #eaeaff;
}
#azienda li a:hover{
	background-color: #7879A8;
	margin: 0px;
	display: block;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 15px;
	color: #FFFFFF;
}

#software{
	visibility: hidden;
	position: absolute;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
	
#software ul{
	border: none;
	margin: 0px;
	padding: 0px;
}
#software li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 1px none #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	width: 177px;
	display: block;
	height: 15px;
	background-color: #EFF8F1;
}
#software li a:hover{
	background-color: #8DAF8C;
	margin: 0px;
	display: block;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 15px;
	color: #FFFFFF;
}
#soluzioni{
	visibility: hidden;
	position: absolute;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
	
#soluzioni ul{
	border: none;
	margin: 0px;
	padding: 0px;
}
#soluzioni li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 1px none #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	width: 177px;
	display: block;
	height: 15px;
	background-color: #F7F5EE;
}
#soluzioni li a:hover{
	background-color: #aeae8c;
	margin: 0px;
	display: block;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 15px;
	color: #FFFFFF;
}
#web{
	visibility: hidden;
	position: absolute;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
	
#web ul{
	border: none;
	margin: 0px;
	padding: 0px;
}
#web li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 1px none #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	width: 177px;
	display: block;
	height: 15px;
	background-color: #F7EEF1;
}
#web li a:hover{
	background-color: #AE8C8C;
	margin: 0px;
	display: block;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 15px;
	color: #FFFFFF;
}

#index{
	visibility: hidden;
	position: absolute;
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
	
#index ul{
	border: none;
	margin: 0px;
	padding: 0px;
}
#index li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 1px none #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	width: 80px;
	display: block;
	height: 15px;
	background-color: #E8E8E8;
	text-align: left;
}
#index li a:hover{
	background-color: #999999;
	margin: 0px;
	display: block;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 15px;
	color: #FFFFFF;
}

codice:

<div id="index">
  <ul>[*]<a href="profilo.asp" onmouseover="clearTimeout(tim);swap1(this)" onmouseout="waitAndClear(activeLayer);swap2(this)">
    Azienda</a>[*]<a href="prodotti.asp" onmouseover="clearTimeout(tim);swap1(this)" onmouseout="waitAndClear(activeLayer);swap2(this)">
    Prodotti</a>[*]<a href="soluzioni.asp" onmouseover="clearTimeout(tim);swap1(this)" onmouseout="waitAndClear(activeLayer);swap2(this)">
    Soluzioni</a>[*]<a href="web.asp" onmouseover="clearTimeout(tim);swap1(this)" onmouseout="waitAndClear(activeLayer);swap2(this)">
    Web</a>[/list]
</div>

spero che questo possa essere sufficiente

**Mich_** · 10-07-2006, 15:35

Non riesco a capire come dovrebbe essere (non ho IE), ma noto gran confusione nel codice della pagina.
Comunque per far visualizzare il pezzo da te citato, ho dovuto cliccare su un quadratino piccolissimo nella sezione "area privata": questo e` chiaramente un errore di usabilita`. E non coincide con quanto dicevi (che bastava passarci sopra con il mouse). Ho visto ora che funziona anceh cliccando su "HOME", ma non basta passarci sopra.

Anzitutto utilizzi formattazione HTML assieme a formattazione CSS: questo non e` mai una bella idea, dato che non puoi sapere quale formattazione avra` la priorita`. Dovresti eliminare tutta la formattazione HTML.

Poi la pagina e` formattata tramite tabelle: questo rende piu` difficile l'uso dei CSS (di default le tabelle non sono fatte per formattare).

E sei sicuro che il problema e` CSS? Perche` ho notato che ci sono dei JS che dovrebbero fare l'onmouseover / onmouseout. Chiaramente se usi CSS e JS per fare la stessa cosa, ci possono essere dei conflitti.

Ultima nota: nei CSS utilizzi posizionamenti: questo puo` portare a interpretazioni diverse, se non si fanno le cose con attenzione: io sconsiglio sempre di usare i posizionamenti.

**papaveri** · 12-07-2006, 09:59

Ti ringrazio per avermi risposto e soprattutto ti ringrazio per i suggerimenti dati.
Credo comunque di avere veramente risolto il problema:effettivamente era un problema di browser nel senso che la sintassi utilizzata non era riconosciuta da Mozilla, ma fortunatamente, scartabellando quà e là su internet, sono riuscita a trovare qualcosa di simile a ciò che mi interessava, percui mi è bastato riadattarne il codice alle mie esigenze (css inclusi) e mi sembra che funzioni abbastanza bene
Salutoni....

Discussione: problema di browser

Strumenti discussione

Ricerca discussione

Visualizza

problema di browser

Permessi di invio