Problema com Menu Horizontal

[CoRnetA_. 0]

Olá pessoal, estou com um problema com meu menu...

ele da um pau quando eu passo o mouse - isso no FF

ele fica sempre com pau - isso no IE

 

o erro que está ocorrendo é esse, isso vendo no FF, se fosse no IE iria ficar tudo daquele geito, lá vai:

http://img47.imageshack.us/img47/2964/assimhp5.gif

 

Mais ok, vou passar o código e a imagem para vocês darem uma olhadinha...

 

Está imagem será utilizada para o código CSS:

menu.gif

http://img230.imageshack.us/img230/592/menuki6.gif

 

código HTML:

<div id="menuNavBox">				<ul id="menuNav">					<li id="menu1"><a class="current" href="">HOME</a></li>					<li id="menu2"><a href="">TRABALHOS</a></li>					<li id="menu3"><a href="">COMENTÁRIOS</a></li>					<li id="menu4"><a href="">LINKS</a></li>					<li id="menu5"><a href="">LINKS</a></li>					<li id="menu6"><a href="">LINKS</a></li>					<li id="menu7"><a href="">LINKS</a></li>					<li id="menu8"><a href="">LINKS</a></li>										<li id="menu9"><a href="">CONTATO</a></li>									</ul>			</div>

código CSS:

#menuNavBox a {	color: #FFFFFF;	font-family: Arial;	font-size: 10px;}#menuNavBox a:hover {	border: 0px none;}#menuNavBox a.current {	color: #000000;}#menuNavBox {	width: 770px; 	height: 40px; 	margin: auto;	padding: 12px 0px 0px 0px;}#menuNavBox ul {	display: block;	list-style: none;	background: url("images/menu.gif") top left no-repeat;	margin: 0;	padding: 0;	width: 770px; 	height: 40px; }#menuNavBox ul li {	float: left;	position: relative;	z-index: 100;	margin: 0;	padding: 0;	width: 85px; 	height: 40px;}#menuNavBox li a {	display: block;	text-decoration: none;	width: 85px; 	height: 40px;}#menuNavBox ul li a:hover, #menuNavBox ul li a.current {	background-image: url("images/menu.gif"); 	background-repeat: no-repeat;}/* Menu 1 */#menuNavBox ul li#menu1 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu1 a:hover {	background-position: 0px -40px;}#menuNavBox ul li#menu1 a.current {	background-position: 0px -80px;}/* Menu 2 */#menuNavBox ul li#menu2 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu2 a:hover {	background-position: -85px -40px;}#menuNavBox ul li#menu2 a.current {	background-position: -85px -80px;}/* Menu 3 */#menuNavBox ul li#menu3 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu3 a:hover {	background-position: -170px -40px;}#menuNavBox ul li#menu3 a.current {	background-position: -170px -80px;}/* Menu 4 */#menuNavBox ul li#menu4 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu4 a:hover {	background-position: -255px -40px;}#menuNavBox ul li#menu4 a.current {	background-position: -255px -80px;}/* Menu 5 */#menuNavBox ul li#menu5 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu5 a:hover {	background-position: -340px -40px;}#menuNavBox ul li#menu5 a.current {	background-position: -340px -80px;}/* Menu 6 */#menuNavBox ul li#menu6 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu6 a:hover {	background-position: -425px -40px;}#menuNavBox ul li#menu6 a.current {	background-position: -425px -80px;}/* Menu 7 */#menuNavBox ul li#menu7 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu7 a:hover {	background-position: -510px -40px;}#menuNavBox ul li#menu7 a.current {	background-position: -510px -80px;}/* Menu 8 */#menuNavBox ul li#menu8 a {	padding: 12px 0px 0px 0px;	text-align: center;		}#menuNavBox ul li#menu8 a:hover {	background-position: -595px -40px;}#menuNavBox ul li#menu8 a.current {	background-position: -595px -80px;}/* Menu 9 */#menuNavBox ul li#menu9 a {	padding: 12px 0px 0px 5px; /* Para deixar os 5px correto de acordo com o texto */	text-align: center;		}#menuNavBox ul li#menu9 a:hover {	padding: 12px 0px 0px 0px; /* Para deixar os 5px correto de acordo com o texto */	text-align: center;	background-position: -685px -40px;	margin: 0px 0px 0px 5px; /* Para deixar certo a borda. Pois é de 85 em 85px, e como o tamanho é 770px, em 9 partes sobra 5px */}#menuNavBox ul li#menu9 a.current {	background-position: -685px -80px;	margin: 0px 0px 0px 5px; /* Para deixar certo a borda. Pois é de 85 em 85px, e como o tamanho é 770px, em 9 partes sobra 5px */}

 

Certo, quem poderia me ajudar eu seria muito grato.

Obrigado desde já!

[CoRnetA_. 0]

Poxa nínguem para ajuda??

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

[marcelrizzo 0]

Então, eu não sei o que fazer nesse ai não mas existem outros mais simples aqui no forum. Sei lá, acho desnecessário tantas IDs

[Rasp 3]

CoRneta_.,

Cara seguinte... você pode disponibilizar o local onde esse menu ta rodando e as imagens corretas cara?

prq se não eu não tenho como te ajudar po... você coloco imagens diferentes pra baixar... ai complica

 

 

[]'s

[RoXbY 3]

se ele está aparecendo embaixo é por que tem área a mais filho, se você utilizou um height 40 e + padding 5, terá uma área height real de 50, certo?da uma olhada ai, corrige isso que não irá aparecer mais o verde embaixo..outro aspecto interessante, é você sempre utilizar um no-repeat no background, ok?! ;Dabs!!

[RoXbY 3]

#menuNavBox li a {display: block;text-decoration: none;width: 85px;height: 26px;}

altera isso ai ;)cara... vou até usar teu menu como base pro meu problema =~~ ahaaeu realmente não sei brincar com lis.. vo te contar ;Xabração!

[CoRnetA_. 0]

marcelrizzo

Então cara, eu vou dar uma enxugada no código, é que quando eu vou criando eu faço assim, depois eu arrumo tudo, mais obrigado pela dica!

 

Rasp

Então cara, eu disponibilizei as imagens, creio que você não leu direito o post... mas obrigado pela atenção, já resolvi.

 

RoXbY

Obrigado pela dica, ficou perfeito hehe, e pode tomar como base sim, hehe...

 

Obrigado a todos pela atenção

[]'s