Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Calc no me funciona en Opera ni Safari

Estas en el tema de Calc no me funciona en Opera ni Safari en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 03/06/2014, 07:33
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 10 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
  #2 (permalink)  
Antiguo 03/06/2014, 07:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Calc no me funciona en Opera ni Safari

En Safari me funciona bien. Obviamente en Safari para Windows es de suponer que no funcione, porque Apple ya no saca versiones para ese SO —hace tres versiones creo.

Y mirando en Opera (en OSX) veo que también funciona.
  #3 (permalink)  
Antiguo 03/06/2014, 10:00
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 10 meses
Puntos: 4
Respuesta: Calc no me funciona en Opera ni Safari

Gracias pzin,
Yo he probado con Safari para Windows, por tu comentario, creo entender que no hace falta que lo haga.
En Opera te sale la foto de la fechada arriba, a a mano derecha? En Opera para PC, no

Por cierto, con qué navegadores pruebas tu que la web se vea bien?

Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #4 (permalink)  
Antiguo 03/06/2014, 15:04
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 10 meses
Puntos: 4
Respuesta: Calc no me funciona en Opera ni Safari

Además lo acabo de probar con IE8 y se ve todo desordenado.
Supongo que debería de usar algún emulador de CSS3 para que funcione con las antiguas versiones de IE. Me aconsejais alguno en especial?

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

Última edición por mblascog; 04/06/2014 a las 01:17
  #5 (permalink)  
Antiguo 04/06/2014, 02:41
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Calc no me funciona en Opera ni Safari

Cita:
Iniciado por mblascog Ver Mensaje
Yo he probado con Safari para Windows, por tu comentario, creo entender que no hace falta que lo haga.
Si usara Windows yo no lo haría. Después de todo Safari donde se usa es en OSX y en iOS.

Cita:
Iniciado por mblascog Ver Mensaje
En Opera te sale la foto de la fechada arriba, a a mano derecha? En Opera para PC, no
Si. Ayer al menos, hoy no sale nada. De todas formas fíjate en el enlace de abajo que tu versión soporte eso.

Cita:
Iniciado por mblascog Ver Mensaje
Por cierto, con qué navegadores pruebas tu que la web se vea bien?
Generalmente me vale que funcione en Chrome, Safari y Firefox. No tengo instalado IE, porque no puedo, pero si tuviera, probaría que se vea bien a partir de IE10. Aunque a mi no me hagas mucho casi que soy muy radical con eso.

Cita:
Iniciado por mblascog Ver Mensaje
Además lo acabo de probar con IE8 y se ve todo desordenado.
Claro, no está soportado calc() en IE8: http://caniuse.com/calc

Como digo yo personalmente no me preocuparía mucho de IE8. Si aún así quieres hacerlo, supongo que usar comentarios condicionales, y dentro de ahí hacer una llamada a un fichero JavaScript que calcule el ancho de ese elemento.
  #6 (permalink)  
Antiguo 04/06/2014, 06:15
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 547
Antigüedad: 17 años, 10 meses
Puntos: 4
Respuesta: Calc no me funciona en Opera ni Safari

Gracias pzin, me son de mucha utililidad tus comentarios.
La verdad es que sería más fácil partir de IE10, pero la verdad, creo que gran parte de los usuarios aún usan IE8, porqué aún hay muchos Windows XP activos, así que me quedo más tranquila que también se vea bien.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 04/06/2014 a las 14:30

Etiquetas: background, calc, color, hover, opera, safari, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:26.