Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Ajuda em CSS Hack para Internet Explorer 6 e 7


Spyder.RV

Pergunta

Salve galera!

Preciso de auxílio para organizar um menu no Internet Explorer.

Testei no Firefox 2 e 3 e tá em ordem, mas no Internet Explorer 6 e 7 o menu fica desorganizado.

O que preciso fazer para deixar o menu alinhado no IE também?

Abaixo seguem imagens mostrando a diferença e também o HTML e CSS do menu.

Foi utilizada uma lista para montar os links do menu.

Figura #1: Menu Ok no Firefox 2 e 3

qs328m.jpg

HTML do Menu

<div id="menu-principal">
  <ul>
   <li><a href="#">HOME PAGE</a></li>
   <li><a href="#">SERCH PROGRAMS</a></li>
   <li><a href="#">OUR CENTER</a></li>
   <li><a href="#">GUIDE</a></li>
   <li><a href="#">ADVISER CENTER</a></li>
   <li><a href="#">SCHOLARSHIPS</a></li>
   <li><a href="#">CONTACTS</a></li>
  </ul>
</div>
CSS do Menu
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

#menu-principal ul {
  margin-top: 22px;
}

#menu-principal ul li a{
  display: block;
  float: left;
  padding: 10px;
  background: url(../images/m1.jpg) no-repeat;
  height: 67px;
  color: white;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 45px;
}

#menu-principal ul li a:hover {
  text-decoration: underline;
  color: yellow;
}

Figura #2: O mesmo menu visualizado no IE 6 ou 7, com os ítens desalinhados

24uxoqt.jpg

Editado por Spyder.RV
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Segue css correto:

*        {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}


#menu-principal ul {
  margin-top: 22px;
  list-style: none;
}

#menu-principal ul li {
    float: left;
    display: inline;
}

#menu-principal ul li a{
  display: block;
  padding: 10px;
  background-color: blue;
  height: 67px;
  color: white;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 45px;
}

#menu-principal ul li a:hover {
  text-decoration: underline;
  color: yellow;
}

Repare que só mudei algumas coisas, por exemplo .. Não coloquei float left na tag a e sim no li e também display inline.

E se não me engano, é bom colocar width para não dar alguma zica pro ie6.

Abraços!

Link para o comentário
Compartilhar em outros sites

  • 0
Segue css correto:

*        {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}


#menu-principal ul {
  margin-top: 22px;
  list-style: none;
}

#menu-principal ul li {
    float: left;
    display: inline;
}

#menu-principal ul li a{
  display: block;
  padding: 10px;
  background-color: blue;
  height: 67px;
  color: white;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 45px;
}

#menu-principal ul li a:hover {
  text-decoration: underline;
  color: yellow;
}

Repare que só mudei algumas coisas, por exemplo .. Não coloquei float left na tag a e sim no li e também display inline.

E se não me engano, é bom colocar width para não dar alguma zica pro ie6.

Abraços!

Hum, saquei...

Colocando o display:inline no li corrigiu um problema que ocorria no firefox, pois não precisei ficar corrigindo posicionamento dos ítens de menu... todos se ajustaram... Eu tinha que corrigir o margin-top da ul em 2px a mais e acabava bagunçando em outros browsers...

Esse tal de CSS é cheio das manhas hein????

Fabuloso!!!! Fabuloso mesmo...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...