[SOLUCIONADO] Problemas de max-width

[mblascog]

Buenas,
Tengo un problema con el ancho del body y del menú.
Por un lado, tengo asignado una anchura máxima de 1024 al body, y en realidad mide 1124.
Tampoco entiendo porqué el menú, no se ajusta al margen izquierdo, ya que no tengo ningún margin, ni padding, ni ...
No sé si me explico bien, la siguiente imagen muestra lo que me pasa:



El body la tengo definido así:

Código CSS:

body {
    background-color:#FFF;
    font:normal 100% Helvetica, Arial;
    max-width:1024px;
    margin:0 auto;
    padding:0;
    color:#FFF
}
 

Y la cabecera, así:

Código CSS:

#capcalera {
    width:100%;
    height:130px;
    background:#FFFCD8;
    float:left;
    padding-left:0%;
    padding-right:0;
    padding-top:1%;
}
#capcalera div#capEsquerra{
    float:left;
    height:100%;
    width:-moz-calc(100% - 108px);
    width:-webkit-calc(100% - 108px);
    width:-o-calc(100% - 108px);
    width:calc(100% - 108px);
} 
#capcalera div#capEsquerra a {
    width:100%;
}
#capcalera div#capEsquerra a img{
    float:left;
    margin-bottom:1%;
    margin-left:1%;
}
#capcalera div#capEsquerra div#marquesina {
    text-align:center;
    font:bold 1.5em 'Arial Narrow';
    margin-top:2%;
}
#capcalera div#capDreta{
    float:right;
}
#capcalera div#capDreta img{
    max-width:108px;
}
#capcalera #menu {
    float:left;
    width:100%;
}
 
#menu nav {
    padding-top:0;
    width:100%;
    height:100%;
}
#menu nav ul {
    list-style-type:none;
    background:#FFFCD8;
    height:100%;
    width:100%;
}
#menu nav ul li#opcioActiva{
    background:#668f6f;
    color:#FFFCD8;
}
#menu nav ul li {
    float:left;
    background:#99b59f;
    line-height:29px;
    width:23%;
    min-width:160px;
    text-align:center;
    vertical-align:middle;
    border-right:1px solid white;
}
#menu nav ul li a{
    text-decoration:none;
    color:#FFFCD8;
}
#menu nav ul li a:hover{
    font:bold 1em 'Helvetica';
    color:#668f6f;
}
#menu nav ul li#bandera {
    border:0;
    min-width:50px;
    width:8%;
}
#menu nav ul li#bandera a {
    width:100%;
}
#menu nav ul li#bandera a img{
    float:none;
    margin:0 auto;
    vertical-align:middle;
    margin-bottom:4px;
}
 

Se puede ver un ejemplo en el siguiente enlace:
http://www.tepui.cat/asinco2/areas_d...tica/eshttp://

Muchas gracias.

[fede5426]

Si no mostras tu codigo HTML dificil ayudarte amigo.

[mblascog]

Llevas razón.

Código HTML:

<div id=capcalera>
    <div id=capEsquerra>
        <a href="http://localhost/asinco/index.php/es"><img src="http://localhost/asinco/imatges/logo.png" alt="Asinco"/></a>
        <div id="marquesina">
        </div>
        <div id="menu">
            <nav>
                <ul>
                    <li><a href="http://localhost/asinco/inicio/es">LA FIRMA</a></li><!--
                    --><li id="opcioActiva">ÁREAS DE PRÁCTICA</li><!--
                    --><li><a href="http://localhost/asinco/login/es">CIRCULARES</a></li><!--
                    --><li><a href="http://localhost/asinco/contacto/es">CONTACTO</a></li><!--
                    --><li id="bandera"><a href='http://localhost/asinco/arees_de_practica/ca' target='_top'><img src='http://localhost/asinco/imatges/bandera_ca.png'/></a></li>
                </ul>
            </nav>
        </div>  
    </div>
    <div id=capDreta>
        <img src="http://localhost/asinco/imatges/facana.png" alt="Asinco"/>
    </div>
</div>
 

Gracias

[Alaon]

Pues si es la misma página web que esta en el enlace, te puedo decir que tienes dos veces declarado el body, con la misma propiedad max-width en la línea 12 y la línea 21.
Una vez que eliminas una y cambiando los valores funciona perfectamente, con las dimensiones indicadas.

Pero si te fijas sin tocar absolutamente nada, en el modelo de cajas del inspeccionador de objetos las dimensiones están bien fijadas.

Por lo que se me ocurre lo siguiente, ¿no tendrás el zoom del navegador activado?.



He comprobado lo mismo en Chrome, Firefox y IE11

[Alaon]

Hola otra vez, olvida lo anterior, no vi la imagen adjuntada.

Aquí tienes el problema en la lista:



tienes indicado un padding de 40 y un magin de 16, si los pones a 0 se soluciona.

[mblascog]

Muchas gracias Alaon

[Alaon]

De nada, me alegra haberte sido de ayuda