Problemas para posicionar capa en internet explorer 8

[LOD_Fredy]

Hola a todos, hoy vengo con otro problemilla.

Tengo una pagina con varias capas, todas estas con posicion estatica a excepcion de 2 que su posicion es fixed, el problema esta en que el efecto que doy no se nota en internet explorer 8 e inferiores, pero en el 9 o cualquier otro navegador funciona correctamente.

este es el css:

Código CSS:

.midiv2 {
    background-image:url(../img/fondorosa.png);
    background-repeat:repeat;
    border:1px solid;
    border-color:#a00000;
    color:black;
    font-weight:bold;
    position: fixed;
    left: 50%; /*esquina izquierda al centro*/
    top: 50%; /*esquina superior al centro*/
    height: 150px; /*alto*/
    /*margin-top: 75px;    /* 400px/2=200px, especificamos la posición central entre las 2 esquinas calculando la mitad del total*/
    width: 400px; /*ancho*/
    margin-left: -200px;    /* 600px/2=300px, especificamos la posición central entre las 2 esquinas calculando la mitad del total*/
    z-index:5500;
    overflow: auto;
    display:block;
    border-radius: 10px; 
    -moz-border-radius: 10 px;
    -webkit-border-radius: 10px;  
}
 

Ahorita display esta en block para que se vea donde aparece y aparece en la parte donde declare la capa y no en el centro que es lo que hace ese codigo.

El detalle esta en que no funciona al poner fixed, pero si pongo absolute si me la centra, lo que no entiendo es por que no funciona aun cuando solo pongo esa capa en el body (quito todo lo demas).

Gracias y disculpen la molestia pero por mas que le busco no encuentro la solucion pues segun yo el codigo css esta bien, puesto que en otros navegadores funciona.

[IsaBelM]

por las dudas lo he probado y en ie8 funciona. sólo has de descomentar descomenta margin-top . por otro lado position: fixed no es admitida en ie7-

[LOD_Fredy]

Pues a mi no me funciona en internet explorer 8 (quien sabe como funcione en 6 o 7), me sigue saliendo arriba como si no tomara en cuenta la propiedad position:fixed, entonces no se como arreglarlo.

[LOD_Fredy]

Hay algo que no mencione, esta pagina esta dentro de un iframe el cual esta contenido en una capa donde a su vez esta capa esta encima de otra.

[IsaBelM]

no importa. en el iframe se carga la página, con su css, html, javascript, ..., hacia la que apunta su src

quizás debieras de mostrarnos el código de la página que se carga en el iframe, al menos lo mas importante para el caso que ocupa

[LOD_Fredy]

subi todo el archivo pues es mucho codigo para ponerlo aqui

http://www.mediafire.com/?gewxbbgqvda9kej

si necesitas el css me dices.

[IsaBelM]

no descargaré nada. muéstranos el html y css, reducido, de la página

[LOD_Fredy]

Esta es la parte del body que se genera en parte con php (obvio pongo el html que se genera)

Código HTML:

<div style="height:100%">
 
<div id="midiv2"></div>
 
<div style="float:left;"><a class="button321" href="detalle_articulo.php?ct_id=44&ar_id=1"><span><<-- Antifaz Gato Negro</span></a></div></td><div style="float:right;"><a class="button3213" href="detalle_articulo.php?ct_id=44&ar_id=16"><span>CAPA ROBIN -->></span></a></div>  
 
 
 
<div id="capabtncerrarcarrito" name="capabtncerrarcarrito"><input class="botonclass" type="button" id="btncerrarcarrito" name="btncerrarcarrito" value="CERRAR" onclick="CerrarDetalleAr()"/></div>
 
<div id="artprin">
 
 <table width="100%" >
 
  <tr>
 
    <td width="336"><p style="font-size:20px;font-weight:bold;background-color:a00000;color:white;"> CAPA BATMAN</p><img style="width:400px;" src="imagenes/30.jpg" alt="CAPA BATMAN"/>
 
</td>
 
    <td><div class="arituclodet">
 
    <table width="99%"> 
 
       <tr>
 
    <td >Precio por PIEZA</td>
 
    <td >10.00  </td>
 
  </tr>
 
             
 
      <tr>
 
    <td ><form name="articulo" id="articulo" action="agregaracarrito.php" method="POST"><input type="button" class="botondown" id="quitar" name="quitar" onclick="Quitar(1)" /><input type="button" class="botonup" id="agregar" name="agregar" onclick="Agregar(1)" /></td>
 
    <td><input type="hidden" id="ar_id" name="ar_id" value="15"/><p><input style="margin-top:10px;" size="3" id="cantidad" name="cantidad" value="1" type="text" onkeypress="return validar(event)" OnBlur="if(document.articulo.cantidad.value=='' || document.articulo.cantidad.value==0)document.articulo.cantidad.value=1;" maxlength="4" /></p><p> <input class="botonshoping2" type="button" name="comprar" id="comprar" onclick="Comprar()" /></p></form></td>
 
  </tr>
 
      <tr>
 
    <th colspan="2">Detalles</th>
 
  </tr>
 
     <tr>
 
    <td  colspan="2">CAPA BATMAN<br/>
 
    Descripcion: <br/>
 
    Medidas: <br/>
 
    Especificaciones: </td>
 
  </tr>
 
        <tr>
 
    <th colspan="2">En Stock: 47 inmediato </th>
 
  </tr>
 
      <tr>    
 
    <td colspan=2>
    </td>
 
    </tr>
       <td >( Hecho en China )</td>-->
 </table></div></td>
  </tr>
</table>
 
</div>
 
<div id="capadisponible" name="capadisponible" style="display:none;background:white;"><p></p><p><img src="img/nuevo%20payaso.png" alt="" width="679" height="478" /><br /><br /></p>
 
<div style="text-align: center;"><span style="font-size: medium; font-family: 'book antiqua', palatino; color: #ff9900;">Si desea contactarnos por favor utilice la forma. Le contestaremos via e-mail lo antes posible. Tambi&eacute;n le podemos atender en el MSN Messenger en la direcci&oacute;n [email protected] de Lunes a Viernes de 10:00am a 6:00pm o en los tel&eacute;fonos (871)7132585 y (871)7931838 o lada sin costo al 01800 8380899. Gracias por su preferencia.</span></div><div style="float:right;margin-top:100px;margin-right:50px;"><input class="buttonchat" type="button" id="chat" name="chat" onclick="MuestraChat(400,400,'chat.html')"/></div><div id="otracapa"></div>
<div id="contact_form">
<p>* Campos obligatorios</p>
<p>
 <form name="contacto" id="contacto">
 <label>Nombre*</label> <br/><input type="text" name="nombre" id="nombre" maxlength="50" value="" onkeypress="return sololetras(event)"/> <br/>
 <label class="error" for="nombre" id="nombre_error">Este campo es requerido.</label> <br/><br/>
 <label>Tel&eacute;fono*</label> <br/><input type="text" name="telefono" id="telefono" value="" maxlength="12" onkeypress="return solonumeros(event)"/> <br/>
 <label class="error" for="telefono" id="telefono_error">Este campo es requerido.</label> <br/><br/>
 <label>E-Mail*</label> <br/><input type="text" name="email1" id="email1" maxlength="20" value="" onkeypress="return solocorreo(event)"/> <br/>
 <label class="error" for="email1" id="email_error">Este campo es requerido.</label>   <br/><br/>
 <label>Asunto*</label> <br/><input type="text" name="asunto" id="asunto" maxlength="50" onkeypress="return solomensajes(event)"/> <br/>
 <label class="error" for="asunto" id="asunto_error">Este campo es requerido.</label>   <br/><br/>
 
 <label>Introduzca su mensaje*</label> <br/><textarea name="mensaje" id="mensaje" rows="10" cols="40" onkeypress="return solomensajes(event)"></textarea>
 <br/><label class="error" for="mensaje" id="mensaje_error">Este campo es requerido.</label> 
 <br/><br/>  
 
 <p><input class="botonclass" type="submit" name="enviar" id="enviar" value="Enviar" /></p>
 </form>
 </p>
</div></div>
 
<div id="capabtncerrarcarrito" name="capabtncerrarcarrito"><input class="botonclass" type="button" id="btncerrarcarrito" name="btncerrarcarrito" value="CERRAR" onclick="CerrarDetalleAr()"/></div>
 

[LOD_Fredy]

este es el css de las partes importantes (segun yo)

Código CSS:

#midiv2{
    background-image:url(../img/fondorosa.png);
    background-repeat:repeat;
    border:1px solid #a00000;
    color:black;
    position: fixed;
    left: 50%; /*esquina izquierda al centro*/
    top: 50%; /*esquina superior al centro*/
    height: 150px; /*alto*/
    margin-top: -75px;    /* 400px/2=200px, especificamos la posición central entre las 2 esquinas calculando la mitad del total*/
    width: 400px; /*ancho*/
    margin-left: -200px;    /* 600px/2=300px, especificamos la posición central entre las 2 esquinas calculando la mitad del total*/
    z-index:6000;
    overflow: auto;
    display:block;
    border-radius: 10px; 
    -moz-border-radius: 10 px;
    -webkit-border-radius: 10px;   
}
#capabtncerrardetart{   
    width:50px;
    height:22px;
    z-index:5005;   
    left: 0%; /*esquina izquierda al centro*/
    top:95%;
    position:fixed;
    /*margin-left:-25;*/
    /*top: 50%; /*esquina superior al centro*/
        /* 600px/2=300px, especificamos la posición central entre las 2 esquinas calculando la mitad del total*/
    /*margin-top:-250px;*/  
}
#artprin table{
    face:arial;
    color:black;
    background:#a00000;
    font-size:12px;
    font-weith:normal;
 }
 #artprin table th{
    background:#a00000;
    color:white;
 }
 #artprin table td{
    font-family:Arial;
 }
 #artprin table tr{
    background:white;
 }
 

[IsaBelM]

he creado las condiciones que indicas en el post #4 y funciona. el bloque midiv2 está fijado. claro está cuando haces scroll en el navegador, el bloque no scrollea. pero creo entender que ese no es tu objetivo

[LOD_Fredy]

la capa midiv2 realmente esta oculta al inicio pero la puse visible para checar en donde aparece. La capa midiv2 debe estar siempre centrada aun cuando en la pagina se haga scroll (es decir, la pagina no cabe en el espacio que puede mostrar), esto lo hace bien en firefox, chrome e internet explorer 9, pero en el internet explorer 8 que viene por defecto en windows 7 falla y muestra la capa midiv2 en la parte donde esta declarada y no centrada (como si tuviera otro tipo de posicion diferente de absolute o fixed), obivamente al hacer scroll se queda en la parte donde esta, por lo que position:fixed no esta funcionando y la verdad no tengo idea por que pues tengo eso mismo en otra parte (la pagina que abre el iframe donde se muestra la pagina del codigo que puse) y ahi si funciona bien, es el mismo codigo css.