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

[Spyder.RV]

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

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

Editado Junho 20, 2009 por Spyder.RV

[Willian Antunes]

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!

[Spyder.RV]

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...