Tengo el siguiente codigo arreglado muy gentilmente por Mikmoro, un conocedor en todo sentido.
Pero miren lo que pasa si comento la línea del borde bottom del <li> (obviamente en FF funciona perfecto, pero miren en IE6):
Código HTML:
<html>
<head>
<style type="text/css">
div.menu {width:50%;background:#DD0000;}
div.menu ul {margin:0; padding:0; list-style:none}
/*div.menu ul li {border-bottom: 1px solid #FFFFFF;}*/
div.menu ul li a {font: 10px Arial,Helvetica,sans-serif; color:#FFFFFF; display:block; text-decoration:none; position: relative; line-height: 18px; vertical-align: middle;}
div.menu ul li a:hover {background:#000000;}
div.menu ul li.inf {}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Primera fila</a></li>
<li><a href="#">Segunda fila</a></li>
<li></li>
<li><a href="#">Cuarta fila</a></li>
<li class="inf"></li>
</ul>
</div>
</body>
</html> Si a esta línea le saco los comentarios para que la valide:
/*div.menu ul li {border-bottom: 1px solid #FFFFFF;}*/
funciona perfecto, pero si no quiero que tenga borde, se me agranda todo, que pasa ?
Y otra pregunta: el último <li> tendra una imagen de 10 px de alto, pero como hago para que el IE tome solamente esa altura?, porque si le pongo height:10px en FF no hay drama, pero en IE como mínimo siempre me deja alrededor de 17 u 18px... y yo quiero que solamente tenga 10 px de alto, como hago ??
Muchas gracias a todos.