[css] O Link Se Desloca No Maldito Ie

Beraldo · Julho 2, 2006

Olhem este link

No menu, o botão "produtos" fica em cima de "Página Inicial" (só no maldito IE :P).

"Produtos' está dentro de uma tag <span>, posicionada com position:relative. O problema é que o IE (:P) está interpretando o relative com relação à DIV que comporta o menu inteiro; já o FF interpreta o relative em relação à tag <li>.

Alguém tem alguma idéia de como posso fazer o "Produtos" ficar em seu devido lugar (como fica no FF) no IE?

Valeu

Abraços

fercosmig · Julho 2, 2006

posta o código aí, pra gente testar!

abraços

Beraldo · Julho 2, 2006

O código da index:

<body>

<div id="logo">
<img src="arquivos/logotipo.jpg" width="434" height="168">
</div><!-- Fim da div logo -->

<div id="menuSup">

</div><!-- Fim da div menuSup -->

<div id="menuLat">
<ul>
  <li><a href="index.php">P&aacute;gina<br>Inicial</a></li>
  <li><a href="#"><span>Produtos</span></a></li>
  <li><a href="#">Fa&ccedil;a Seu<br>Pedido</a></li>
  <li><a href="#">Fale<br>Conosco</a></li>
</ul>
</div><!--Fim da div menuLat -->

<div id="conteudo">
<a href="#">LINK AQUI</a> NÃO LINK AQUI
</div><!-- Fim da div conteúdo -->
</body>

E o arquivo CSS que posiciona a página:

#menuLat {
  position:absolute;
  left:2px;
  top:208px;
  width:106px;
  height:274px;
  background: url(../arquivos/fundo-pattern.gif) no-repeat;
  margin: 0;
  padding: 2px;
}
#menuSup {
  position:absolute;
  left:0px;
  top:177px;
  width:100%;
  height:25px;
  background: url(../arquivos/fundo-pattern.jpg);
  margin: 0;
  padding: 0;
}
#logo {
  position:absolute;
  left:50%;
  top:7px;
  width:434px;
  height:168px;
  z-index:1;
  margin: 0 0 0 -217px;
  padding: 0;
}
#menuLat UL{
  position: relative;
  top: 10px;
  left: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#menuLat UL LI{
  margin-bottom: 8px;
}
#menuLat UL LI SPAN {
  position:relative; top: 10px;left: -4px;
} 
#menuLat A {
  display: block;
  background: url(../arquivos/link-up.gif) no-repeat;
  text-decoration: none;
  width: 80px;
  height: 44px;
  color: #FFCC00;
  padding: 12px 0 0 16px;
  font: bolder 15px Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}
#menuLat A:hover {
  background: url(../arquivos/link-over.gif) no-repeat;
  text-decoration: none;
  color: white;
}
#conteudo {
  position: absolute;
  top: 212px;
  right: 3px;
  width: 84.7%;
  margin: 0;
  padding: 0;
}

Tentei adicionar #menuLat UL LI SPAN ao código CSS, para ver se o IE entendia que o relative era em relação à <li>, mas ele é burro! :P não entendeu mesmo assim.

Eu posso fazer os botões em Flash, mas deve haver uma forma de fazer com CSS.

Valeu

Abraços

fercosmig · Julho 2, 2006

fiz umas alterações aqui:

#menuLat UL LI SPAN {
  position:relative; top: 40px;left: -4px;

mas zoa também.. muito esquisito

to vendo aí! qqer coisa posto aí

Beraldo · Julho 2, 2006

O f*da é que se você adequa pro FF, dá pau pro IE. e vice-versa.

Eu vou fazer em Flash mesmo.

Estou há dois dias tentando resolver isso, mas está difícil. Com o Flash não terei esse prblema.

Valeu

Abraço

kuroi · Julho 3, 2006

to sem ff aqui pra testar, mas no ie funcionou assim:

#menuLat UL LI SPAN {
  margin-top: 10px;
  margin-left: -4px;
} [/code]
sem precisar de position relative, da uma olhada aí.

Beraldo · Julho 3, 2006

Deu no IE, mas no FF, não.

Vou fazer em Flash mesmo.

valeu

Abraço

kuroi · Julho 3, 2006

estranho, testei agora do ff e deu certo. você usou este codigo?

#menuLat UL LI SPAN {
  margin-top: 10px;
  margin-left: -4px;
} [/code]

veja, você tem que tirar o position relative e, em vez de top e left usar margin-top e margin-left. o codigo que você tinha usado: [code]#menuLat UL LI SPAN {
  position:relative; top: 10px;left: -4px;
}

não pode aparecer no arquivo.

Beraldo · Julho 3, 2006

Eu fiz como você disee, porém a SPAN não fica alinhada como eu quero nos dois navegadores.

Ela fica dentro do botão no IE e no FF, mas não exatamente no local que desejo, sacou?

Mas, mesmo assim, valeu a ajuda! :)

Entrar

[css] O Link Se Desloca No Maldito Ie

Pergunta

Beraldo

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

Beraldo

Link para o comentário

Compartilhar em outros sites

fercosmig

Link para o comentário

Compartilhar em outros sites

Beraldo

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Beraldo

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Beraldo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades