¡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.