Comunidad de diseño web y desarrollo en internet online

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

Citar            
MensajeEscrito el 14 Mar 2012 09:41 am
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 [URL="http://www.revistavoluntas.com/pruebas/"]http://www.revistavoluntas.com/pruebas/[/URL] 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.

Por chuntin

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Mar 2012 10:59 am
si a primera vista... el tema esta en:

Código HTML :

    
<div id="prin">           
      <!--[if IE]><div id="fondo1ie"><![endif]-->            
      <!--[if !IE]> -->
      <div id="fondo1">
        <!-- <![endif]-->                        
        <img src="deg.png" width="100%" height="100%"/>         
      </div>  


supongo que se interpreta la img como imagen, tal vez si colocaras la imagen como fondo... del div ¿?, es una opción ya te digo que asi a vista rápida.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 14 Mar 2012 11:38 am
si pongo la imagen como fondo me hace lo mismo. comprobado.

Por chuntin

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Mar 2012 11:49 am
Este es el fallo exacto que me pasa:

Por chuntin

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Mar 2012 01:07 pm
ya veo lo que ocurre.... a ver si tengo un poco de tiempo y lo miro con detenimiento.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 14 Mar 2012 01:12 pm
Gracias por ayudarme, llevo un par de dias dandole vueltas y no hay manera...

Por chuntin

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Mar 2012 02:27 pm
No mire mucho el código, pero creo que tu problema lo solucionas estableciendo una medidas minimas en pixeles al div que contiene la imagen, algo como esto:

#fondolie {
min-width: 960px;
min-height: 800px

}

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 14 Mar 2012 03:34 pm
Lo siento pero asi tampoco se me soluciona. He probado poniendole min y max de tamaño pero me sigue haciendo eso.

Por chuntin

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Mar 2012 05:04 pm
:cool: visto, el problema es de mie, que configura... al 100% al cargar la página, y solo coje el valor de la ventana del navegador, no el tamaño de "la página".

soluciones posibles que veo...

1._ usar javascript para forzar a refrescar cuando este en IE, con la funcion "onresize"

2._forzar el estilo de la página a medidas no porcentuales.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 14 Mar 2012 06:01 pm
como lo haria con javascript??? ando un poco perdido en este tema.

No puedo usar pixeles ya que cuando se hace mas pequeño el fondo tiene difuminadas las 4 esquinas aunque no se aprecia mucho pero necesito que se mantenga asi. si lo hago con pixels no se hara mas pequeño a proporcion

gracias

Por chuntin

5 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 14 Mar 2012 06:46 pm
en lo de pixeles .... no me refiero.... me xplico.

en vez de decir 100%
hacer el tamaño fijo.... por ejemplo 900(width) x 900 (height)es decir hacer como si de un cuadro se tratara.

usarias dos capas/divs/(o)img del mismo tamaño.. uno para el dibujo de las rayas, y el otro para el degradado... luego el fondo(body) podríamos dejarlo en negro.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 14 Mar 2012 07:38 pm
lo siento mucho pero no te entiendo. lo de 900x900 te refieres a ponerselo a los div en el css?

-las rayas las tengo como fondo de body. ¿las pongo como fondo de otra capa?

dime si voy muy perdido o como puedo hacerlo. gracias por tu ayuda

Por chuntin

5 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 14 Mar 2012 08:08 pm
[img]http://desmond.imageshack.us/Himg252/scaled.php?server=252&filename=tmpw.jpg&res=medium[/img]


la estructura seria algo asi.

body
div contenedor1
div degradado

------resto de codig----

/div
/div
/body

********
los contendor ydegradado... por ejemplo 900 width y 900 height,

Código HTML :

body{
     background:#000000;
}
#contenedor{     
     background-image:url('Voluntas Aragon_files/voluntas_patron_fondo_web.png');
     background-repeat:repeat;
     background-color:white;
     z-index:10;
     width:900px; 
     height:900px;
}
#degradado{
     background-image:url('Voluntas Aragon_files/deg.png');
     z-index:10;
     width:900px; 
     height:900px;
}

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.