Tengo 4 layers (div) que deben medir 60x90 px y estar uno al lado del otro separados por 10 o 20 px.
este es mi codigo:
Código:
<div id='header'><img src='logo'><div class='menu verde'>Empresa</div><div class='menu azul'>Productos</div><div class='menu indigo'>Novedades</div><div class='menu violeta'>Contacto</div></div>
.menu{
color:#FFFFFF;
height:60px;
padding:5px;
text-align:right;
vertical-align:bottom;
width:90px;
font-size: 9pt;
font-weight: bold;
margin: 10px;
}
.verde{
background: url(img/degradeVerde.png) repeat-x top left;
}
.azul{
background: url(img/degradeAzul.png) repeat-x top left;
}
.indigo{
background: url(img/degradeIndigo.png) repeat-x top left;
}
.violeta{
background: url(img/degradeVioleta.png) repeat-x top left;
}
El tema es que los layers tienen display:block. Si lo cambio a inline o pongo spans, no puedo asignarle ancho ni alto.
display: inline-block trae muchos problemas con los navegadores.
Alguna solucion?