Porque mi codigo no funciona bien en IE pero si en Chrome?

morfasto · #1 (**permalink**) 23/11/2011, 02:09

Hola, que tal?

Acabo de hacer un codigo css para un lightbox pero por alguna razon me funciona muy bien en google chrome pero no en internet explorer 8, este es mi codigo:

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript" language="javascript">
function showLightbox() {
    document.getElementById('over').style.display='block';
    document.getElementById('fade').style.display='block';
}
function hideLightbox() {
    document.getElementById('over').style.display='none';
    document.getElementById('fade').style.display='none';
}
</script>
<style type="text/css">
.fadebox {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height:100%;
    background-color: yellow;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.overbox {
    display: none;
    position: relative;
    margin:auto;
    width: 900px;
    height: auto;
    z-index:1002;
    overflow: auto;
    border: 2px solid red;
}
#hide {
    display: none;
    border:1px solid red;
}
#imagen {
    text-align:center;
    display:table-cell; 
    vertical-align:middle;
    height: 720px;
    width: 900px;
    top: 0px;
    border:1px solid black;
    background-color:black;
}
#like{
    position:relative;
    height:28px;
    width:700px;
    border:1px solid black;
    background-color:white;
}
#descripcion{
    position:relative;
    height: 150px;
    width: 700px;
    border:1px solid black;
    background-color:white;
}
#comentarios{
    position:relative;
    width: 700px;
    height:151px;
    border:1px solid black;
    background-color:white;
}
#anadir_comentarios{
    position:relative;
    height:29px;
    width:700px;
    border:1px solid black;
    background-color:white;
}
#adds{
    float:right;
    position:relative;
    width: 190px;
    height:361px;
    background-color:white;
    border:1px solid black;
}
#contenedor{
    position:relative;
    float:left;
}
 
</style>
</head>
<body>
<a href="javascript:showLightbox()">Show LightBox</a>
<div id="over" class="overbox">
    <div id="imagen">
    </div>
    <div id="paquete">
        <div id="contenedor">
            <div id="like">
            </div>
            <div id="descripcion">
                <a href="javascript:hideLightbox();">Hide LightBox</a>
            </div>
            <div id="comentarios">
            </div>
            <div id="anadir_comentarios">
                <form action="javascript:get();" name="myform" id="myform">
                    <input type="text" id="comentario" value="" style="width:612px" />
                    <input type="submit" value="Comentar" />
                </form>
            </div>
        </div>
        <div id="adds"></div>
    </div>
</div>
 
    
 
<a href="javascript:hideLightbox();"><div id="fade" class="fadebox"></div></a>
</body>
</html>

Alguien sabe porque es que pasa esto? se puede solucionar?

Muchas gracias!

emprear · #2 (**permalink**) 23/11/2011, 07:54

Siempre incluí un Doctype válido a tus páginas, en tu caso, si lo hacés, el problema se resuelve.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

otro detalle, si bien no afecta al funcionamiento, reemplazá la linea

Código HTML:

Ver original<a href="javascript:hideLightbox();"><div id="fade" class="fadebox"></div></a>

por

Código HTML:

Ver original<div id="fade" class="fadebox"><a href="javascript:hideLightbox();"></a></div>

con lo que vas a tener un documento 100% xhtml válido

Saludos

morfasto · #3 (**permalink**) 23/11/2011, 10:57

Genial, funciono perfecto, pero tengo otra pregunta, porque las dimensiones en google chrome son distintas que en internet explorer?, algunos divs son mas grandes en internet explorer que en chrome o sino los text inputs son mas grandes :S, porque pasa eso?

emprear · #4 (**permalink**) 23/11/2011, 11:06

Normalmente eso pasa porque la forma de aplicar padding y margin difiere entre navegadores, para eso se utilizan los resets css

SAludos

morfasto · #5 (**permalink**) 23/11/2011, 11:31

Una ultima pregunta, como hago para que cuando abra mi lightbox, este no aparezca debajo del ultimo div, sino en el TOP:5px; de la pantalla?

Muchisimas gracias por toda su ayuda!

morfasto · #6 (**permalink**) 23/11/2011, 19:56

Alguien tiene alguna idea?

venommist · #7 (**permalink**) 24/11/2011, 08:46

Estimado:
Si conocer el id o el Class directo de la ventana a tratar, hazlo con un css, te recomiendo que lo inspecciones con Chrome, o con Firebug. Si es un id o class dinámico, te recomiendo que revises el fichero hasta que te piller con dicho div, y le agreges un nuevo class (agregando un espacio al class si ya posee uno, por ej. "class='lightbox_cc margen_top' ").

Espero haber sido de ayuda.

Saludos