Tema: Porque mi codigo no funciona bien en IE pero si en Chrome?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/11/2011, 02:09
Avatar de morfasto
morfasto
 
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 12 años, 9 meses
Puntos: 8
Porque mi codigo no funciona bien en IE pero si en Chrome?
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
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title></title>
  5. <script type="text/javascript" language="javascript">
  6. function showLightbox() {
  7.     document.getElementById('over').style.display='block';
  8.     document.getElementById('fade').style.display='block';
  9. }
  10. function hideLightbox() {
  11.     document.getElementById('over').style.display='none';
  12.     document.getElementById('fade').style.display='none';
  13. }
  14. </script>
  15. <style type="text/css">
  16. .fadebox {
  17.     display: none;
  18.     position: fixed;
  19.     top: 0%;
  20.     left: 0%;
  21.     width: 100%;
  22.     height:100%;
  23.     background-color: yellow;
  24.     z-index:1001;
  25.     -moz-opacity: 0.8;
  26.     opacity:.80;
  27.     filter: alpha(opacity=80);
  28. }
  29. .overbox {
  30.     display: none;
  31.     position: relative;
  32.     margin:auto;
  33.     width: 900px;
  34.     height: auto;
  35.     z-index:1002;
  36.     overflow: auto;
  37.     border: 2px solid red;
  38. }
  39. #hide {
  40.     display: none;
  41.     border:1px solid red;
  42. }
  43. #imagen {
  44.     text-align:center;
  45.     display:table-cell; 
  46.     vertical-align:middle;
  47.     height: 720px;
  48.     width: 900px;
  49.     top: 0px;
  50.     border:1px solid black;
  51.     background-color:black;
  52. }
  53. #like{
  54.     position:relative;
  55.     height:28px;
  56.     width:700px;
  57.     border:1px solid black;
  58.     background-color:white;
  59. }
  60. #descripcion{
  61.     position:relative;
  62.     height: 150px;
  63.     width: 700px;
  64.     border:1px solid black;
  65.     background-color:white;
  66. }
  67. #comentarios{
  68.     position:relative;
  69.     width: 700px;
  70.     height:151px;
  71.     border:1px solid black;
  72.     background-color:white;
  73. }
  74. #anadir_comentarios{
  75.     position:relative;
  76.     height:29px;
  77.     width:700px;
  78.     border:1px solid black;
  79.     background-color:white;
  80. }
  81. #adds{
  82.     float:right;
  83.     position:relative;
  84.     width: 190px;
  85.     height:361px;
  86.     background-color:white;
  87.     border:1px solid black;
  88. }
  89. #contenedor{
  90.     position:relative;
  91.     float:left;
  92. }
  93.  
  94. </style>
  95. </head>
  96. <body>
  97. <a href="javascript:showLightbox()">Show LightBox</a>
  98. <div id="over" class="overbox">
  99.     <div id="imagen">
  100.     </div>
  101.     <div id="paquete">
  102.         <div id="contenedor">
  103.             <div id="like">
  104.             </div>
  105.             <div id="descripcion">
  106.                 <a href="javascript:hideLightbox();">Hide LightBox</a>
  107.             </div>
  108.             <div id="comentarios">
  109.             </div>
  110.             <div id="anadir_comentarios">
  111.                 <form action="javascript:get();" name="myform" id="myform">
  112.                     <input type="text" id="comentario" value="" style="width:612px" />
  113.                     <input type="submit" value="Comentar" />
  114.                 </form>
  115.             </div>
  116.         </div>
  117.         <div id="adds"></div>
  118.     </div>
  119. </div>
  120.  
  121.     
  122.  
  123. <a href="javascript:hideLightbox();"><div id="fade" class="fadebox"></div></a>
  124. </body>
  125. </html>

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

Muchas gracias!