Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] background-color no funciona correctamente

 Estas en el tema de background-color no funciona correctamente en el foro de CSS en Foros del Web. Tengo una ventana modal, le aplico color de fondo #CCC y se bien en FF pero en IE me lo pinta por debajo de la ...
  #1 (permalink)  
Antiguo 25/07/2013, 04:52
 
Fecha de Ingreso: marzo-2013
Mensajes: 83
Antigüedad: 11 años
Puntos: 0
background-color no funciona correctamente
Tengo una ventana modal, le aplico color de fondo #CCC y se bien en FF pero en IE me lo pinta por debajo de la ventana modal con lo cual no se puede ver el color del background

Aclarar que en firefox se ve bien porque el la capa es "transparente" mientras que en IE no

este es el codigo .js de la ventana modal:

Código Javascript: 
Ver original
  1. $(function(){
  2.     //evento que se produce al hacer clic en el boton cerrar de la ventana
  3.     $('.clsVentanaCerrar').live('click',function(eEvento){
  4.         //prevenimos el comportamiento normal del enlace
  5.         eEvento.preventDefault();
  6.         //buscamos la ventana padre (del boton "cerrar")
  7.         var $objVentana=$($(this).parents().get(1)); 
  8.         //cerramos la ventana suavemente
  9.         $objVentana.fadeOut(300,function(){
  10.             //eliminamos la ventana del DOM
  11.             $(this).remove();
  12.             //ocultamos el overlay suavemente
  13.             $('#divOverlay').fadeOut(500,function(){
  14.                 //eliminamos el overlay del DOM
  15.                 $(this).remove();
  16.                 //location.reload();
  17.             });
  18.         });
  19.     });
  20.     
  21.     $('.clsVentanaIFrame').on('click',function(eEvento){
  22.         //prevenir el comportamiento normal del enlace
  23.         eEvento.preventDefault();
  24.         //obtenemos la pagina que queremos cargar en la ventana y el titulo. esto es una anotación para pasar variables por GET-->+$('#Nombre').val()
  25.         var strPagina=$(this).attr('href'), strTitulo=$(this).attr('rel');
  26.         
  27.         //creamos la nueva ventana para mostrar el contenido y la capa para el titulo
  28.         var $objVentana=$('<div id="ProntContenedor" class="clsVentana'+$(this).attr('tamano')+'">'), $objVentanaTitulo=$('<div class="clsVentanaTitulo">');
  29.         
  30.         //agregamos el titulo establecido y el boton cerrar
  31.  
  32.         $objVentanaTitulo.append('<a href="" id="cerrar" class="clsVentanaCerrar"><img src="/Imagenes/Iconos/Cancelar.png" width="17" height="17" border="0"</></a>');
  33.         $objVentanaTitulo.append('<strong class="Titulo">'+strTitulo+'</strong>');
  34.         
  35.         //agregamos la capa de titulo a la ventana
  36.         $objVentana.append($objVentanaTitulo);
  37.         
  38.         //creamos la capa que va a mostrar el contenido
  39.         var $objVentanaContenido=$('<div id="ProntMarco" class="clsVentanaContenido'+$(this).attr('tamano')+'">');
  40.         
  41.         //agregamos un iframe y en el source colocamos la pagina que queremos cargar ;)
  42.         $objVentanaContenido.append('<iframe id="ProntContenido" src="'+strPagina+'">')
  43.         
  44.         //agregamos la capa de contenido a la ventana
  45.         $objVentana.append($objVentanaContenido);
  46.         
  47.         //creamos el overlay con sus propiedades css y lo agregamos al body
  48.         var $objOverlay=$('<div id="divOverlay">').css({
  49.             opacity: .5,
  50.             display: 'none'
  51.         });
  52.         $('body').append($objOverlay);
  53.         
  54.         //animamos el overlay y cuando su animacion termina seguimos con la ventana
  55.         $objOverlay.fadeIn(function(){
  56.             //agregamos la nueva ventana al body
  57.             $('body').append($objVentana);
  58.             //mostramos la ventana suavemente ;)
  59.             $objVentana.fadeIn();
  60.         })
  61.     });
  62. });

y estas son las propiedades css:

Código CSS: 
Ver original
  1. *{padding: 0;margin: 0;}
  2. /* estilos del overlay */
  3. #divOverlay{position: fixed;background:#000;height: 100%;width: 100%;z-index: 99998;display: none;top: 0;left: 0;}
  4. .clsVentanaTitulo{background: #222;color:#fff;border-radius: 3px 3px 0 0;display:block;height:30px;font:13px Verdana;text-align:center;}
  5. .clsVentanaTitulo strong{display: inline-block;padding: 5px;margin-top:3px;}
  6. .clsVentanaTitulo a{float:right;display:inline-block;color:#fff; text-decoration:none;background: #222;/*color botón*/padding:4px;margin-top:2px;margin-right:5px;border-radius:3px;cursor:pointer;}
  7. .clsVentanaTitulo a:hover{background:#fff;color:#000;}
  8. body{background-color:#CCC;border:none;}
  9. /* EXTRA GRANDE */
  10. .clsVentanaXG{width:800px;height:500px;margin-left:-400px;margin-top:-250px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
  11. .clsVentanaContenidoXG{width:800px; height:470px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
  12. .clsVentanaContenidoXG iframe{text-decoration:none;border-radius:3px;border:none;width:780px;height:450px;padding:10px;}
  13. /* GRANDE */
  14. .clsVentanaG{width:800px;height:350px;margin-left:-400px;margin-top:-175px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCCCCC;z-index:99999;display:none;}
  15. .clsVentanaContenidoG{width:800px; height:320px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;border:none;background-color:#CCCCCC;}
  16. .clsVentanaContenidoG iframe{text-decoration:none;border:none;border-radius:3px;width:780px;height:300px;padding:10px;background-color:#CCCCCC;}
  17. /* MEDIANA */
  18. .clsVentanaM{width:622px;height:380px;margin-left:-311px;margin-top:-190px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
  19. .clsVentanaContenidoM{width:622px; height:350px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
  20. .clsVentanaContenidoM iframe{text-decoration:none;border-radius:3px;border:none;width:612px;height:340px;padding:5px;}
  21. /* CHICA */
  22. .clsVentanaP{width:550px;height:350px;margin-left:-225px;margin-top:-175px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
  23. .clsVentanaContenidoP{width:550px; height:310px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
  24. .clsVentanaContenidoP iframe{text-decoration:none;border-radius:3px;border:none;width:540;height:300px;padding:5px;}
  25. /* EXTRA PEQUEÑA */
  26. .clsVentanaXS{width:400px;height:300px;margin-left:-200px;margin-top:-150px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
  27. .clsVentanaContenidoXS{width:400px; height:270px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
  28. .clsVentanaContenidoXS iframe{text-decoration:none;border-radius:3px;border:none;width:390px;height:260px;padding:5px;}
  29. /* EXTRA EXTRA PEQUEÑA */
  30. .clsVentanaXXS{width:350px;height:240px;margin-left:-175px;margin-top:-120px;border:solid 1px #FFF;text-decoration:none;position:absolute;top:50%;left:50%;border-radius:3px;box-shadow: 0 0 15px #999;background-color:#CCC;z-index:99999;display:none;}
  31. .clsVentanaContenidoXXS{width:350px; height:210px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
  32. .clsVentanaContenidoXXS iframe{text-decoration:none;border-radius:3px;border:none;width:340px;height:200px;padding:5px;}
  #2 (permalink)  
Antiguo 28/07/2013, 04:38
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: background-color no funciona correctamente
Pocos se van a molestar en entender qué es lo que hace ese JavaScript y muchos menos intentar leer la sopa de código CSS.

Publica el HTML que genera tu código JavaScript y ordena un poco el CSS para que sea algo más legible.

Etiquetas: background-color, hover
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:29.