Problema DIVs en IE8 y Chrome Ante todo, el foro es muy interesante y completo.
Mi pregunta se refiere a que tengo 2 divs supuestamente alineadas (en Firefox y Safari perfecto) pero en IE8 y Chrome se ven un DIV debajo de otro.
Pueden ver el problema aqui:[URL="http://www.graphik.com.ar/index1.html"]http://www.graphik.com.ar/index1.html[/URL]
Mis códigos:
HTML
Código:
...y CSS:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Graphik</title>
<link href="estilos_div1.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
var temporizadorplegar;
var temporizadordesplegar;
function plegar(){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById("content").style.height);
if(altura>20)
{
altura--;
document.getElementById("content").style.height=altura+"px";
temporizadorplegar=setTimeout("plegar()",3);
}
else
{
clearTimeout(temporizadorplegar);
}
}
function desplegar(){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById("content").style.height);
if(altura<305){
altura++;
document.getElementById("content").style.height=altura+"px";
temporizadordesplegar=setTimeout("desplegar()",3);
}
else
{
clearTimeout(temporizadordesplegar);
}
}
//-->
</script>
</head>
<body>
<div id="content" style="width:100%; height:20px; background-color:#006699; overflow:hidden;">
<div id="headup" >Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>
</div>
<div id="top" >
<div id="botones" >
<input type="image" id="recoger" onclick="plegar()" src="imagenes/arriba.gif"/>
<input type="image" id="desplegar" onclick="desplegar()" src="imagenes/abajo.gif" />
</div>
<div id="logo" ><img src="imagenes/logo_web.jpg" width="250" height="80 alt="Volver al inicio"</div>
<div id="publicidad" >
<p> </p>
<p> </p>
<p>Una imágen vale más que mil palabras...</p>
</div>
</div>
</body>
</html>
Código:
Espero que puedan ayudarme.* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#content {width:100%; height:23px; background-color:#006699; overflow:hidden; position:relative}
#headup {width:800px ; margin: 4px auto }
#top {width:800px ; width:80 ; margin: 0px auto ; display:inline-block; }
#logo {width:250px ; height:80px ; float:left ;}
#botones {width:200px; height:25px; float:right ; margin: 0px 0px 0px 0px ; overflow:hidden; position:relative; }
#publicidad { width:250px; height:50px; float:right ; position:relative; }
Saludos.
