img de div no se ajusta al tamaño del navegador en iexplorer

chuntin · #1 (**permalink**) 14/03/2012, 03:04

hola buenas, tengo un html con css que no se como hacer para que se ajuste un div que contiene una imagenal tamaño que tenga la pantalla.

les enseño el html:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">        
  <head>              
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />              
    <title>Voluntas Arag&oacute;n               
    </title>   
             
    <style type="text/css">            
    *{margin:0;padding:0;}                
    body {background:url(voluntas_patron_fondo_web.png) repeat; z-index:5; width:100%; height:100%;}               
    #a{border:0;border-color:no;}               
    
    /*ESTO SE EJECUTA SOLO SI ES INTERNET EXPLORER*/     
    #fondo1ie {position:absolute; z-index:10; width:100%; height:100%;}      
    #logoie{position:absolute; z-index:50; width:240px; margin-left:-120px; left:50%; padding-top:10px;}     
    #formie{position:absolute; z-index:50; width:535px; margin-left:-267px; left:50%;  text-align:center;}          
    
    /*ESTO SE EJECUTA SOLO SI --NO-- ES INTERNET EXPLORER*/         
    #fondo1{ position:fixed; z-index:10; width:100%; height:100%;}	 	   		          
    #logo{position:absolute; z-index:50; width:240px; margin-left:-120px; left:50%; padding-top:10px; }                    
    #form{position:absolute; z-index:50; width:535px; margin-left:-267px; left:50%;  text-align:center;}                     
    .campo{background: transparent; border: 1px Solid transparent; font-family: Verdana, Geneva, sans-serif; 	font-weight: bold; padding-left:2px;}   	        
    #logo #form #form table tr td { 	text-align: right; }          
    #logo #form #form table { 	text-align: right; 	font-family: Verdana, Geneva, sans-serif; 	font-weight: bold; }          
    #logo #form #form button { 	font-family: Verdana, Geneva, sans-serif; 	font-weight: bold; }          
    </style>    
                  
  </head>      
  <body leftmargin="0px" topmargin="0px" bottommargin="0px" rightmargin="0px">    
    <div id="prin">           
      <!--[if IE]><div id="fondo1ie"><![endif]-->    	     
      <!--[if !IE]> -->
      <div id="fondo1">
        <!-- <![endif]-->       	              
        <img src="deg.png" width="100%" height="100%"/>         
      </div>          
      <!--[if IE]><div id="logoie" align="center"><![endif]-->   	     
      <!--[if !IE]> -->     
      <div id="logo" align="center">      
        <!-- <![endif]-->                                         
        <img src="Voluntas_logo_V.png" width="240" height="325" align="center"/>           
        <br>      
        <br>                       
        <!--[if IE]><div id="formie"><![endif]-->    	       
        <!--[if !IE]> -->       
        <div id="form">        
          <!-- <![endif]-->                         
          <p>          
            <img src="voluntas_filete_superior.png" width="535" height="25">           
          </p>               
          <p>            
            <br>          
            <img src="Voluntas_texto_campos.png" width="535" height="72">        
          </p> <br />                             
          <form action="enviar.php" method="post" name="contacto" id="form" onSubmit="javascript:alert('Ya tenemos tus datos')">                       
            <center>            
              <table width="0" border="0"  cellspacing="5" cellpadding="5">                 
                <tr>                     
                  <td align="right">                       
                    <label for="nombre" class="campo">Tan solo dinos tu nombre                    
                    </label></td> <td>                       
                    <!--[if IE]><input id="nombre" name="nombre" type="text" value="___________________" onFocus="if (this.value=='___________________') this.value='';" placeholder="___________________" required class="campo"><![endif]-->                        
                    <!--[if !IE]> -->                   
                    <input id="nombre" name="nombre" type="text" placeholder="___________________" required class="campo">                  
                    <!-- <![endif]--> </td>                 
                </tr>                 
                <tr>                     
                  <td align="right">                       
                    <label for="apellido" class="campo">apellido
                    </label></td> <td>                       
                    <!--[if IE]><input id="apellido" name="apellido" type="text" value="___________________" onFocus="if (this.value=='___________________') this.value='';" placeholder="___________________" required class="campo"><![endif]-->                        
                    <!--[if !IE]> -->                   
                    <input id="apellido" name="apellido" type="text" placeholder="___________________" required class="campo">                  
                    <!-- <![endif]--> </td>                 
                </tr>                 
                <tr>    
                  <td align="right">                  
                    <label for="nombre" class="campo">y correo electr&oacute;nico                   
                    </label></td> <td>                       
                    <!--[if IE]><input type="email" id="email" name="email" value="___________________" onFocus="if (this.value=='___________________') this.value='';" placeholder="___________________" required class="campo"><![endif]-->                        
                    <!--[if !IE]> -->                   
                    <input type="email" id="email" name="email" placeholder="___________________" required class="campo">                  
                    <!-- <![endif]--> </td>                 
                </tr>                 
                <tr>                
                  <td colspan="2">                  
                    <center>                    
                      <button type="submit">Enviar                     
                      </button>                  
                    </center></td>              
                </tr>            
              </table>          
            </center>                               
            <img src="voluntas_filete_inferior.png" width="535" height="25">                         		           
            <p>            
              <a href="http://www.facebook.com/profile.php?id=100002236836566">              
                <img src="Voluntas_logo_facebook.png" width="36" height="36" border="0"></a>          
            </p>                                                              
          </form>             
        </div>        
      </div>   
    </div>                                    
  </body>
</html>

si abren http://www.revistavoluntas.com/pruebas/ con internet explorer y con firefox para hacer la prueba.

En firefox funciona como quiero: si reducen la pantalla a un tamaño muy pequeño y hacen scroll la imagen del div fondo1 que es deg.png se ajusta a todo el contenido

En explorer hacen lo mismo y al hacer scroll hacia abajo el fondo que es un degradado se corta en altura.

No se como solucionarlo, si me pueden echar una mano se lo agradezco de antemano ya.

chuntin · #2 (**permalink**) 14/03/2012, 05:53

esto me pasa para que lo veais mas claro:

LagoGZ · #3 (**permalink**) 14/03/2012, 09:37

He abierto el enlace y veo q ya lo has solucionado,no?

Yo crearía una imagen para el fondo y metería el logo y el form aparte, estableciendo valores de ancho y alto.

Cómo lo has hecho tú?

Un saludo.

chuntin · #4 (**permalink**) 14/03/2012, 12:04

pues aun no lo he solucionado. El problema lo tengo con internet explorer.

kseso? · #5 (**permalink**) 14/03/2012, 17:31

Para la imagen al 100%:
cree un div hijo directo de body con las propiedades:

Código CSS:

Ver original#fondo-imag {
    height: 200%;
    left: -50%;
    position: fixed;
    top: -50%;
    width: 200%;
}

coloque dentro de él la imagen que quiere que se extienda al 100% y le declara:

Código CSS:

Ver original#fondo-imag img {
    bottom: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Por supuesto, no se olvide de incluir:

Código CSS:

Ver originalhtml, body {
    height: auto !important;
    min-height: 100%;
    width: 100%;
}

¿Se fijó que la parte izquierda del texto queda inaccesible al reducir la ventana?
Sugerencia:
Cambios a realizar en su css:

Código CSS:

Ver original#logo {
    margin: 0 auto;
    position: relative;
    width: 535px;
    z-index: 50;
}
 
#form {
    margin: 0 auto;
    position: relative;
    width: 535px;
    z-index: 50;
}
 
img.logo {
    display: block;
    margin: 15px auto;
}

img.logo es su imagen del águila.