Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/06/2014, 06:33
mblascog
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 20 años, 5 meses
Puntos: 4
Calc no me funciona en Opera ni Safari

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 original
  1. header {
  2.     width:100%;
  3.     float:left;
  4. }
  5. #capcalera {
  6.     width:100%;
  7.     height:130px;
  8.     background:#FFFCD8;
  9.     float:left;
  10.     padding-left:0%;
  11.     padding-right:0;
  12.     padding-top:1%;
  13.     font-size:.9em;
  14. }
  15. #capcalera div#capEsquerra{
  16.     float:left;
  17.     height:100%;
  18.     width:-moz-calc(100% - 108px);
  19.     width:-webkit-calc(100% - 108px);
  20.     width:-o-calc(100% - 108px);
  21.     width:calc(100% - 108px);
  22. }
  23. #capcalera div#capEsquerra a{
  24.     width:100%;
  25. }
  26. #capcalera div#capEsquerra a img{
  27.     float:left;margin-bottom:1%;margin-left:1%;
  28. }
  29. #capcalera div#capDreta{
  30.     float:right;
  31.     width:108px;
  32. }
  33. #menu {
  34.     float:left;
  35.     width:100%;
  36.     background:#99b59f;
  37. }
  38. #menu nav {
  39.     font:bold 1em 'Helvetica';
  40.     padding-top:2px;
  41.     width:100%;
  42. }
  43. #menu nav ul {
  44.     list-style-type:none;
  45.     background:#367A7B;
  46. }
  47. #menu nav ul li#opcioActiva{
  48.     background:#668f6f;
  49.     color:#FFFCD8;
  50. }
  51. #menu nav ul li {
  52.     float:left;
  53.     background:#99b59f;
  54.     line-height:40px;
  55.     width:23%;
  56.     min-width:160px;
  57.     text-align:center;
  58.     vertical-align:middle;
  59.     border-right:1px solid white;
  60. }
  61. #menu nav ul li a{
  62.     text-decoration:none;
  63.     color:#FFFCD8;
  64. }
  65. #menu nav ul li a:hover{
  66.     font:bold 1em 'Helvetica';
  67.     color:#668f6f;
  68. }
  69. #menu nav ul li#bandera{
  70.     border:0;
  71.     min-width:50px;
  72.     width:8%;
  73. }
  74. #menu nav ul li#bandera a{
  75.     width:100%;
  76. }
  77. #menu nav ul li#bandera a img{float:none;
  78.     margin:0 auto;
  79.     vertical-align:middle;
  80. }
Se puede ver un ejemplo :aquí

Muchas gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no