Buenas, expongo mi problema. Hice un menú en css el cual con zoom 100% del navegador se ve perfectamente y sin ningún fallo. Sin embargo cuando alejo o acerco el zoom empieza a descuadrarse. He probado ya muchísimas cosas pero siguo igual.
CSS:
Código PHP:
#cuerpo{
margin:0 auto;
width:803px;
}
#menu{
position:absolute;
border: 2px #000000 solid;
top:189px;
width:803px;
max-width: 803px;
}
#menu ul {
border: 0px #000000 solid;
list-style:none;
width:803px;
margin:0;
padding:0;
}
#menu li {
margin:0;
float:left
}
#menu li a{
display:block;
color:#FFFFFF;
background-image:url("img/menu-off.jpg");
color:#FFFFFF;
padding: 6px 38px 7px 38px;
border-left:1px #000000 solid;
text-decoration:none;
font-weight:bold
}
#menu li a:hover{
background-image:url("img/menu-on.jpg");
}
HTML:
Código HTML:
<div id="cuerpo">
<div id="header"></div>
<div class="menu" id="menu">
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="order.php">Servidores de Juego</a></li>
<li><a href="more.php">Más Productos</a></li>
<li><a href="servers.php">Pruebanos</a></li>
<li><a href="contact.php" style="padding:6px 34px 7px 33px;">Contactanos</a></li>
</ul>
</div>
</div>
¿Estoy haciendo algo mal? No lo entiendo. Llevo semanas probando cosas diferentes. Ya nos es algo puntual, es algo que quiero "estudiar" por llamarlo de alguna manera cómo corregirlo la próxima vez. Espero que podáis ayudarme. Muchas gracias.
Un saludo
EDITO (imagenes):
Zoom - 100%:
Zoom - 83%: