Calculo de posicion variable erroneo

juanmiguel · #1 (**permalink**) 09/07/2012, 09:07

¡Hola a todos! Me encuentro con un problema que me está volviendo loco y ya llevo muchas vueltas, ojala podáis ayudarme y me podáis decir que hago mal.

Se trata de un div centrado horizontalmente y verticalmente de tamaño variable en el que dentro se colocan unas imágenes posicionadas también.

Tengo puesto en este link: http://www.edages.es/prueba.html el siguiente código:

Código:

<html>
  <head>
    <title></title>
    <meta content="">
  <style>
  #content{
        position: absolute;
        width:90%;
        height:90%;
        margin-top:-45%;
        margin-left:-45%;
        top:50%;
        left:50%;
        border: dotted 1px;
        }
  #firefox, #chrome{
        position: absolute;
        border:solid 0px;
        top: 50%;
        left: 50%;
        z-index:+0;
        text-align:left;
        }
  #firefox{width:35%;margin-top: -13%;margin-left: -5%;}
  #chrome{width:30%;margin-top: -49%;margin-left: -50%;}
  </style>
  </head>
  <body>

  <div id="content">
        <img id="firefox" src="http://www.muycomputer.com/wp-content/uploads/2011/12/mozilla-firefox1.jpg">
        <img id="chrome"  src="http://2.bp.blogspot.com/-pxq9k5AgQ3Q/TvFJGlU3-mI/AAAAAAAAACI/0oZyhjDPaeM/s1600/chrome.png">
  <div>
</body>
</html>

El caso es que si lo habrimos con Chrome o Safari y modificacmos el tamaño del explorador web redimensiona a la perfección las imagens y las deja en su posición perfectamente.

Si lo abro con Firefox o con IE9 ya directamente se ve mal, ya que debe calcular mal el top o no se que hará.

De que forma puedo dejar esto de forma que haga en los 4 exploradores lo mismo que hace en chrome.

Mil gracias por adelantado.

kseso? · #2 (**permalink**) 10/07/2012, 07:35

Quizás algo de información sobre el tema del centrado le venga bien.

rossijona · #3 (**permalink**) 10/07/2012, 13:56

Yo hice algo similar, lo que hacia es con jquery tomar las medidas de la ventana del navegador y a partir de esas medidas hacía el resto de los cálculos.

Jquer usaba la función height() y widt()

$(window).height(); //tomas el alto de la ventana
$(window).width(); //tomas el ancho de la ventana