[Resolvido] Acerta estilo do menu

[Ringeril 0]

Boas,

 

Estou tentando arrumar o estilo desse menu de navegação por barras, mas não consigo nada. Ele ficam diferente em cada browser.

Ele é composto por CSS, HTML e JS.

Agradeço se alguem poder ajudar.

 

CSS

.barraul {
	float: left;
	cursor: pointer;
	list-style: none;
	vertical-align: top;
}
.barrali {
	background: url('images/bg_menu_news.png') no-repeat center; 
	width: 97px;
	height: 29px;
	float: left;
	cursor: pointer;
	list-style: none;
	margin: 2px; 
	position: relative; 
	line-height: 1.7em;
	text-align: center;
	text-decoration: none; 
}
.barrali:hover {
	background: url('images/bg_menu_news_hover.png') no-repeat center; 
	width: 97px;
	height: 29px;
	float: left;
	cursor: pointer;
	list-style: none;
	margin: 0; 
	margin: 2px; 
	position: relative; 
	line-height: 1.7em;
	text-align: center;
	text-decoration: none; 
}
.barradiv {
	clear: both;
	width: 300px;
	background-color: #fafad2;
}

HTML

<ul class="barraul">
	 <li onclick="mostrar('1')" class="barrali"> Novas </li>
	 <li onclick="mostrar('2')" class="barrali"> Top 5 </li>
	 <li onclick="mostrar('3')" class="barrali"> Internacionais </li>
</ul>
<div id="nav1" class="barradiv" style="display: block">
  <?php include "includes/news.php"; ?>
</div>
<div id="nav2" class="barradiv" style="display: none">
  <?php include "includes/newstop.php"; ?>
</div>
<div id="nav3" class="barradiv" style="display: none">
  <?php include "includes/newsinter.php"; ?>
</div>

JS

function mostrar(alvo){

	for(i=1; i<=4; i++){
		var qual = 'nav' + i;
		var esconde = document.getElementById(qual);
		esconde.style.display = 'none';
	}


	var alvo = 'nav' + alvo;
	
	var elemento = document.getElementById(alvo);
	
	if(elemento.style.display=="none")
		elemento.style.display = 'block';
	else
		elemento.style.display = 'none';
}

Abraços!

[Henrique Barcelos 290]

var esconde = document.getElementById(qual);

 

Onde está definido o parâmetro qual???

[Ringeril 0]

Bem aqui:

 

for(i=1; i<=4; i++){

var qual = 'nav' + i;

var esconde = document.getElementById(qual);

esconde.style.display = 'none';

}

[Ringeril 0]

Agradeço a todos mas já acertei o estilo.

 

CSS

.barraul {
	cursor: pointer;
	list-style: none;
	margin: 0; 
	padding: 0;
}
.barrali {
	background: url('images/bg_menu_news.png') no-repeat center; 
	width: 97px;
	height: 29px;
	cursor: pointer;
	float: left;
	list-style: none;
	margin: 1px; 
	line-height: 1.7em;
	text-align: center;
	text-decoration: none; 
}
.barrali:hover {
	background: url('images/bg_menu_news_hover.png') no-repeat center; 
	width: 97px;
	height: 29px;
	cursor: pointer;
	float: left;
	list-style: none;
	margin: 1px; 
	line-height: 1.7em;
	text-align: center;
	text-decoration: none; 
}
.barradiv {
	clear: both;
	width: 300px;
	background-color: #fafad2;
}