Problema con display: inline-block al subir web

[Jime25]

Hola, foreros
Posteo porque se me presentó un problema con la propiedad display: inline-block al subir una página a la red. Utilicé esta propiedad en el menú de navegación, para que los diferentes enlaces se encuentren alineados horizontalmente, y en el footer.
Al visualizar la página de forma local no hay problema alguno, pero online ocurre algo bastante extraño: a veces se ve correctamente (al ingresar a la página) y a veces se ven los enlaces uno encima del otro (al presionar F5).
La web es http://www.moreto.com.ar/

Muchas gracias

¡Saludos!

[Naahuel]

Probando en últimas versiones de FF y Chrome, no importa cuantas veces refresque siempre aparece bien.

Sin embargo en IE no, siempre aparecen uno encima del otro. Y no sólo eso, sino que los demás estilos no se aplican tampoco (como fuentes, list-style, etc).

Yo puedo ver varios errores de entrada, como ser esto:

Código HTML:

<a href="productos.html"><li class="boton" id="boton">Productos</li></a>
 

Ese tipo de enmarcado no es válido. Ni siquiera en HTML5. El <a> no puede ser hijo directo del <ul>. Probá cambiando eso a:

Código HTML:

<li class="boton" id="boton"><a href="productos.html">Productos</a></li>
 

Además de eso, el id boton se repite en todos los botones.

Otros errores, en el CSS:

padding-right : 0 auto 0 auto Estás usando la forma abreviada para padding, donde cada valor corresponde a top, right, bottom y left. padding-right admite un solo valor.
vertical-align : center No existe. es: vertical-align : middle

En fin, yo creo que corrigiendo el primer error, el del enmarcado, puede que se solucione.

[Jime25]

Muchas gracias por tu rápida respuesta, voy a probar a ver si con lo que decís funciona

Saludos

PD: Estoy usando Chrome para probar la página