Bom tarde, estou a fazer um menu de um site, o código dele é o seguinte: html - menu organizado assim: ------ ... <body> <div id="menu"> <b> <ul> <li><a href="fich/menu1.html" target="menu">menu1</a></li> <li><a href="fich/menu2.html" target="menu">menu2</a></li> <li><a href="fich/menu3.html" target="menu">menu3</a></li> <li><a href="fich/menu4.html" target="menu">menu4</a></li> <li><a href="fich/menu5.html" target="menu">menu5</a></li> <li><a href="fich/menu6.html" target="menu">menu6</a></li> <li><a href="fich/menu7.html" target="menu">menu7</a></li> <li><a href="#" onClick="changetwo('fich/ini.html', 'fich/menu8.html')">menu8</a></li> <li><a href="fich/menu9.html" target="menu">menu9</a></li> </ul> </b> </div> </body> ... ------ css ------ body { margin-left: auto; margin-right: auto; background-color: #FFFFFF; } #menu ul { margin: 1pt; padding:1pt; list-style-type: none; text-indent: 2px; margin-bottom:0pt; width: 135px; } #menu li { list-style: none; font-size:10pt; } #menu li a { display:block; color:#3267BF; text-decoration: none; } #menu li a:hover {color: #679966; background: #F3F3F3;} ------ O problema é que ao abrir com o firefox aparece o menu normal com pouco espaço entre os items, como eu quero, e se abrir com o IE já aparecem mais afastados. como resolvo?
oi, altera a seguinte css do li para: #menu li { list-style: none; font-size:10pt; height:18px; !height:8px; } O que fiz foi especificar a height para o elemento. A segunda height é apenas para o IE (tem o ! no inicio), caso contrário nao ficava bem. Espero ter ajudado
olá, se eu colocar como você disse, a distancia entre os menus ficam um pouco maior do que eu queria, mas se eu tirar o height:18 e colocar por sua vez 16 já fica bem com a distância que quero no mozilla, mas assim tenho de definir um valor diferente para o height IE como faço?
basta alterar !height:8px; para um valor que fique bem no IE. O resultado desta linha apenas se reflecte no IE
Assim parece-me que dá: #menu li { list-style: none; font-size:10pt; margin-top:0px; !margin-top:-3px; }
Bom, muito obrigado pela ajuda, mexi lá nos valores e deu. http://xs124.xs.to/xs124/08093/ex2730.png #menu li { list-style: none; font-size:10pt; margin-top:0px; !margin-top:-8px; !margin-bottom:-18px; } mas agora o problema é que se colocar um valor menor que -7, no !margin-top:;, por exemplo -8 como se vê na imagem, as letras começam a ser cortadas, mas o essencial já está, a única diferença que vai existir entre os dois browsers são as letras que vão ficar mais acima no IE.
Vai ao google e procura: Internet Explorer CSS hacks. Infelizmente parece que os Eng. na microsoft têm algum problema com os CSS.