he hecho un menú donde coloco dos imágenes en 1 DIV con texto en el centro (las imgs son los bordes del botón) i pongo "vertical-align: middle" en las imágenes para que el texto quede centrado verticalmente.
En Mozilla se ve perfectamente, pero en IE aparece las imágenes que colo en los bordos aparecen 1 pixel más abajo y queda un pequeño borde arriba como resultado de la img de fondo. Si pongo "vertical-align: text-top" el píxel se borra pero el texto se va para arriba, con lo cual no me sirve porque tampoco puedo utilizar margin o padding en un enlace.
Código HTML:
<div class="button"> <img src="img/b1.png" class="va"/> <a href="">Blog</a> <img src="img/b2.png" class="va"/> </div>
Código HTML:
.button{
margin: 0 6px 0 0;
padding: 0;
background: #fff url(img/b3.png);
height: 37px;
float: left;
font: Bold 0.96em "Verdana";
letter-spacing: -0.05em;
line-height: 0;
}
.button a{
margin: 0;
text-decoration: none;
color: black;
}
.button .va{
vertical-align: middle;
padding: 0;
}
