Spyder.RV Postado Junho 20, 2009 Denunciar Share Postado Junho 20, 2009 (editado) 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 3HTML 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Willian Antunes Postado Junho 20, 2009 Denunciar Share Postado Junho 20, 2009 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! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Spyder.RV Postado Junho 20, 2009 Autor Denunciar Share Postado Junho 20, 2009 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... Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
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
CSS do MenuFigura #2: O mesmo menu visualizado no IE 6 ou 7, com os ítens desalinhados
Editado por Spyder.RV
Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
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.