Efeito indesejado com menu em linha

[_DEH 0]

Bom, fiz o menu de meu site in-line.

Ta tudo certo e tals, no IE funciona maravilhas (o que é mais importante, segundo o cliente), mas no Firefox o menu fica clicável só nas bordas das caixas.

Problema esse pq quis que o texto fosse substituido por imagem, e usei o seguinte código no css:

 

 

ul li.menu_home a {background:url(images/bot_home.gif) no-repeat; width:118px; display:block; height:31px;}ul li.menu_home a:hover{background:url(images/bot_home_f2.gif) no-repeat;  }

 

 

alguém saberia me ajudar? quero que a caixa toda fique clicável no Firefox tbm!

 

avlew,

um abraço!

[_DEH 0]

opa, passei o css errado

uhahua

 

aqui ta o certo:

 

#TOP_MENU{position:relative; width:490px; top:84px; left:13px; float:left;}#TOP_MENU ul {	padding:0;	margin: 0;}#TOP_MENU ul li {	display:inline;}#TOP_MENU ul li a {	padding:0px; float:left; text-indent:-999px; overflow:visible; height:31px; display:block;}

mas é ainda o msm problema!

[Paulo de Tarso F. M. 24]

Não tem nenhum link pra vermos onde está o problema exatamente?

[_DEH 0]

www.dburnsdesign.com/project_files/pettube

 

confira no IE e no Firefox!

[Paulo de Tarso F. M. 24]

Isso acontece porque dentro da sua tag <a> você não colocou nada!!! Além do que você criou seu menu usando só imagem! E seu caso é muito simples de resolver e tb, do ponto de vista acessível, seria melhor fazer o seguinte:

<div id="top_menu">	<ul>		<li><a href="#">Home</a></li>		<li><a href="#">Videos</a></li>		<li><a href="#">Best in Show</a></li>		<li><a href="#">My account</a></li>	</ul></div>

Para o menu, você usaria as seguintes imagens:

bot_home.gif:

 

bot_home_f2.gif:

Aí, no seu CSS:

* {	padding: 0;	margin: 0;}#top_menu ul li {	display: inline;}#top_menu ul li a {	width: 121px;	height: 31px;	display: block;	float: left;	font: 16px Arial, Helvetica, sans-serif;	font-weight: 600;	color: #000;	text-decoration: none;	text-align: center;	line-height: 31px;	background: url(bot_home.gif) no-repeat;}#top_menu ul li a:hover {	background: url(bot_home_f2.gif) no-repeat;}

Pronto!

 

Veja o seu exemplo on-line!!!

 

Você também pode baixar o exemplo pronto! Já está tudo no ZIP as 2 imagens e o HTML com o CSS certinho... Espero que isso te ajude...

 

Qualquer coisa, é só postar! Abraço!

[_DEH 0]

Olha só cara! q prestativo hahahaum exemplo pra esse forum!muito obrigado, vou fazer o possível aqui.Um abraço!

[Giovani 104]

Não sei pq, mas senti uma ponta de sarcasmo aqui http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Olha só cara! q prestativo hahahaum exemplo pra esse forum!

[_DEH 0]

auehueahueaum pouco sim.. mas é isso aí, é nois na veia mano hahahaum abraço cara