Buenas,
Estoy comprobando la web y me he dado cuenta, que la función calc de css no se ejecuta en Safari ni Opera, en cambio, funciona perfecto en Chrome, Internet Explorer i Firefox.
El cálculo es: 100% - 108px. Esto da 916píxeles (1024-108), pero en Safari y Opera da 930píxeles, por lo que la imagen no aparece
El codigo CSS es este:
Código CSS:
Ver originalheader {
width:100%;
float:left;
}
#capcalera {
width:100%;
height:130px;
background:#FFFCD8;
float:left;
padding-left:0%;
padding-right:0;
padding-top:1%;
font-size:.9em;
}
#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#capDreta{
float:right;
width:108px;
}
#menu {
float:left;
width:100%;
background:#99b59f;
}
#menu nav {
font:bold 1em 'Helvetica';
padding-top:2px;
width:100%;
}
#menu nav ul {
list-style-type:none;
background:#367A7B;
}
#menu nav ul li#opcioActiva{
background:#668f6f;
color:#FFFCD8;
}
#menu nav ul li {
float:left;
background:#99b59f;
line-height:40px;
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;
}
Se puede ver un ejemplo :
aquí
Muchas gracias.