[SOLUCIONADO] background-color no funciona correctamente

[joselegolas]

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:

$(function(){
    //evento que se produce al hacer clic en el boton cerrar de la ventana
    $('.clsVentanaCerrar').live('click',function(eEvento){
        //prevenimos el comportamiento normal del enlace
        eEvento.preventDefault();
        //buscamos la ventana padre (del boton "cerrar")
        var $objVentana=$($(this).parents().get(1)); 
        //cerramos la ventana suavemente
        $objVentana.fadeOut(300,function(){
            //eliminamos la ventana del DOM
            $(this).remove();
            //ocultamos el overlay suavemente
            $('#divOverlay').fadeOut(500,function(){
                //eliminamos el overlay del DOM
                $(this).remove();
                //location.reload();
            });
        });
    });
    
    $('.clsVentanaIFrame').on('click',function(eEvento){
        //prevenir el comportamiento normal del enlace
        eEvento.preventDefault();
        //obtenemos la pagina que queremos cargar en la ventana y el titulo. esto es una anotación para pasar variables por GET-->+$('#Nombre').val()
        var strPagina=$(this).attr('href'), strTitulo=$(this).attr('rel');
        
        //creamos la nueva ventana para mostrar el contenido y la capa para el titulo
        var $objVentana=$('<div id="ProntContenedor" class="clsVentana'+$(this).attr('tamano')+'">'), $objVentanaTitulo=$('<div class="clsVentanaTitulo">');
        
        //agregamos el titulo establecido y el boton cerrar
 
        $objVentanaTitulo.append('<a href="" id="cerrar" class="clsVentanaCerrar"><img src="/Imagenes/Iconos/Cancelar.png" width="17" height="17" border="0"</></a>');
        $objVentanaTitulo.append('<strong class="Titulo">'+strTitulo+'</strong>');
        
        //agregamos la capa de titulo a la ventana
        $objVentana.append($objVentanaTitulo);
        
        //creamos la capa que va a mostrar el contenido
        var $objVentanaContenido=$('<div id="ProntMarco" class="clsVentanaContenido'+$(this).attr('tamano')+'">');
        
        //agregamos un iframe y en el source colocamos la pagina que queremos cargar ;)
        $objVentanaContenido.append('<iframe id="ProntContenido" src="'+strPagina+'">')
        
        //agregamos la capa de contenido a la ventana
        $objVentana.append($objVentanaContenido);
        
        //creamos el overlay con sus propiedades css y lo agregamos al body
        var $objOverlay=$('<div id="divOverlay">').css({
            opacity: .5,
            display: 'none'
        });
        $('body').append($objOverlay);
        
        //animamos el overlay y cuando su animacion termina seguimos con la ventana
        $objOverlay.fadeIn(function(){
            //agregamos la nueva ventana al body
            $('body').append($objVentana);
            //mostramos la ventana suavemente ;)
            $objVentana.fadeIn();
        })
    });
});
 

y estas son las propiedades css:

Código CSS:

*{padding: 0;margin: 0;}
/* estilos del overlay */
#divOverlay{position: fixed;background:#000;height: 100%;width: 100%;z-index: 99998;display: none;top: 0;left: 0;}
.clsVentanaTitulo{background: #222;color:#fff;border-radius: 3px 3px 0 0;display:block;height:30px;font:13px Verdana;text-align:center;}
.clsVentanaTitulo strong{display: inline-block;padding: 5px;margin-top:3px;}
.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;}
.clsVentanaTitulo a:hover{background:#fff;color:#000;}
body{background-color:#CCC;border:none;}
/* EXTRA GRANDE */
.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;}
.clsVentanaContenidoXG{width:800px; height:470px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXG iframe{text-decoration:none;border-radius:3px;border:none;width:780px;height:450px;padding:10px;}
/* GRANDE */
.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;}
.clsVentanaContenidoG{width:800px; height:320px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;border:none;background-color:#CCCCCC;}
.clsVentanaContenidoG iframe{text-decoration:none;border:none;border-radius:3px;width:780px;height:300px;padding:10px;background-color:#CCCCCC;}
/* MEDIANA */
.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;}
.clsVentanaContenidoM{width:622px; height:350px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoM iframe{text-decoration:none;border-radius:3px;border:none;width:612px;height:340px;padding:5px;}
/* CHICA */
.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;}
.clsVentanaContenidoP{width:550px; height:310px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoP iframe{text-decoration:none;border-radius:3px;border:none;width:540;height:300px;padding:5px;}
/* EXTRA PEQUEÑA */
.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;}
.clsVentanaContenidoXS{width:400px; height:270px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXS iframe{text-decoration:none;border-radius:3px;border:none;width:390px;height:260px;padding:5px;}
/* EXTRA EXTRA PEQUEÑA */
.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;}
.clsVentanaContenidoXXS{width:350px; height:210px;text-decoration:none;overflow:auto;border-radius: 0 0 3px 3px;}
.clsVentanaContenidoXXS iframe{text-decoration:none;border-radius:3px;border:none;width:340px;height:200px;padding:5px;}
 

[pzin]

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.