Foros del Web - display: inline + width y height

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?