6 replies to this topic

[PC Arashiro]

Fala galera, blz?
Estou com um problema aqui no menu do site
http://www.audisolution.com/index.asp

No IE fica sobrando um espaço embaixo das imagens que compõem o menu. Já no FF fica tudo certo.
Tentei zerar tudo na img, ul li e na div#menu, padding, margin e nada deu certo. Não sei mais o que fazer pra alinhar isso direito..

alguém tem uma sugestão?

aqui tá o css, no ínicio do CSS já havia zerado os espaçamentos com o *{margin:0px; padding:0px;}


div#menu{
height:24px;
border-bottom:8px solid #1881C5;
padding-left:10px;
}
div#menu ul{}
div#menu li{display:inline;}



Cód html

<!--MENU -->
<div id="menu">
<ul class="menu">
<li><a href="index.asp" title="Página Principal"><img src="layout/aba_home_on.gif" alt="Home" border="0" /></a></li>
<li><a href="empresa.asp" title="Descrição da Empresa"><img src="layout/aba_empresa_off.gif" alt="Empresa" border="0" /></a></li>
<li><a href="audicao.asp" title="Tudo sobre audição"><img src="layout/aba_audicao_off.gif" alt="Audição" border="0" /></a></li>
<li><a href="servicos.asp" title="Serviços prestados pela Audisolution"><img src="layout/aba_servicos_off.gif" alt="Seviços" border="0" /></a></li>
<li><a href="produtos.asp" title="Produtos auditivos e acessórios"><img src="layout/aba_produtos_off.gif" alt="Produtos" border="0" /></a></li>
<li><a href="local.asp" title="Como chegar na Audisolution"><img src="layout/aba_local_off.gif" alt="Local" border="0" /></a></li>
<li><a href="contato.asp" title="Fale conosco"><img src="layout/aba_contato_off.gif" alt="Contato" border="0" /></a></li>
<li><a href="links.asp" title="Links Pertinentes"><img src="layout/aba_link_off.gif" alt="Links" border="0" /></a></li>
</ul>
</div>
<!-- FIM MENU -->

[_Samuca_]

tente colocar assim nas li:

div#menu li{
  display:inline;
  margin:0px;
  padding:0px;
  height:24px;
}

*bem bonito o site cara. gostei muito, bem limpo, cores bonitas... mto bom mesmo!

[Klaus]

Se não rolar, dê uma olhada aqui:

http://www.csscreator.com/node/6745

[PC Arashiro]

Putz, ainda não consegui resolver.. já tinha tentado esse código Samuca e não rolou. Testei algumas coisas desses bugs listados no site Klaus e ainda nao rolou...

tô ficando doido com isso. Só no ieca q não funciona, ele tá criando um espaço por vontade própria, não é possível eheuhehueuhe

se alguém tiver mais alguma idéia do que possa ser, ajuda bastante

ae consegui ajeitar!!

tirei o estilo da div "menu". Acho que foi vacilo pq tava usando o mesmo nome de ID pra div 'menu" e o mesmo nome pra classe da ul "menu"...

deixei o CSS assim pra ser usado como class na UL

.menu{
display:block;
width:100%;
height:24px;
border-bottom:8px solid #1881C5;
padding-left:10px;
margin:0px;
padding:0px;
}
.menu ul{margin:0px;
padding:0px;}
.menu li{display:inline;margin:0px;
padding:0px;}

[_Samuca_]

hmmm, esse IE é um problema mesmo... hehehe.

só para desencargo da consciência, tente fazer isso:

1º - Em cada <img> que está no <li> coloque a "height"

<li><a href="index.asp" alt="Home" title="Página Principal"><img src="layout/aba_home_on.gif" height="24" alt="Home" border="0" /></a></li>

se não adiantar, tente assim:
2º - vamos colocar cada imagem dentro de um div, com a altura pre-determinada

<li><div style="height:24px;"><a href="index.asp" alt="Home" title="Página Principal"><img src="layout/aba_home_on.gif" alt="Home" border="0" /></a></div></li>

*O que acontece, é que o IE tem mania de deichar esse espaço em branco em baixo das imagens. Já tive esse problema, e só consegui resolver, deichando as imagens sempre dentro de uma <div></div> com o tamanho pre-determinado.

Testa aí e ve se da boa

[bimonti]

Não é aquele problema de renderização que eu esqueci o nome ?? Isso esse mesmo, bom que você lembrou ....

É que no IE dependendo da DTD ele renderiza as imagens com display:inline e deixa o espaço embaixo para o caso da imagem acompanhar um texto (o espaço serve para caracteres extendidos como o 'p','q' ou 'g').... Mudando o display para block nas imagens dependendo do caso resolve o problema, senão colocando dentro de uma div com o tamanho pré-definido e overflow: hidden também pode rolar de dar certo, mas vamos dizer que é uma solução alternativa ...

[PC Arashiro]

Opa, então já consegui resolver... é como falei. Acho que foi algum vacilo meu no css. tava com o id e class com o mesmo nome... apesar que eu acho que não deveria influenciar assim.. mas em todo caso já consegui resolver o problema...

Samuca, essa maneira de colocar uma div pra cada item da lista fica um pouco fora da semântica né? O menu vai acabar ficando com umas tags desnecessárias.

vlw pelo help ae galera.