No pensé volver a este tema, pero mientras hacía una versión del efecto para guardarme, apareció algo extraño.
Quizá debi abrir otro, con otro ejemplo, donde se viera mejor el problema. Lo que pasa es que lo encontré trabajando con este código, y aquí mismo ya se mencionó el asunto de las alturas y los márgenes fantasma.
Por eso vuelvo, aunque seguramente me van a poner un enlace a algún tema donde ya lo hayan resuelto.
Antes de empezar —y para que no no pienses que estoy ignorando tu pregunta— te diré que en las FAQ y en todo el Foro hay información sobre los DTD. Y supongo que aparecen más con cualquier buscador. Éste sería como para empezar.
http://www.w3.org/QA/Tips/Doctype
Yo no puedo ayudarte más,
gepd, porque no los entiendo mucho; siempre estaba por estudiarlos con la idea de hacer mis propios
doctype, y al final los dejé. Me acostumbré a usar el de HTML transicional, que funciona bastante bien en todos los navegadores.
En fin, volviendo a mi asunto, esta es la versión que hice teniendo en cuenta el "
zoom" para
Firefox 2 o menores y que tiene corregido el
bug del tamaño de texto.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>gepd - Mikel - caricatos</title>
<script type="text/javascript">
var altura3 = 0;
function agrandar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");
var altura1 = contenido1.offsetHeight;
var altura2 = contenido2.offsetHeight;
if(altura1 < altura2){
altura3 = altura3 + 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("agrandar()",25);
}
}
function achicar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");
if(altura3 > 0.1){
altura3 = altura3 - 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("achicar()",25);
}
else {
contenido1.style.height = altura3 = 0;
}
}
</script>
<style type="text/css">
body {margin:0; background-color:#000000; color:#ffffff;
font-size:100%;}
#barra1 {background-color:#ffffff; color:#000000; height:0;
overflow: hidden; font-size:20pt;}
.abajo {width:1em; height:1em; font-size:6px; border-style:solid;
border-top-color:#ffffff; border-left-color:#000000;
border-right-color:#000000; border-bottom-color:#000000;
border-top-width:1em; border-left-width:0.5em;
border-right-width:0.5em; border-bottom-width:1px;
background-color:#ffffff; padding:0; cursor:pointer;}
.arriba {width:1em; height:1em; font-size:6px; border-style:solid;
border-top-color:#000000; border-left-color:#000000;
border-right-color:#000000; border-bottom-color:#ffffff;
border-top-width:1px; border-left-width:0.5em;
border-right-width:0.5em; border-bottom-width:1em;
background-color:#fffffff; padding:0; cursor:pointer;}
#pag {padding:0 10px 15px 10px;}
img {height:6em; background-color:#808080; color:#800000;
font-family:gothic, celtic, decorative, fantasy, cursive; }
</style>
</head>
<body>
<center><input type=button class=abajo onClick="agrandar()"
title="ABRE" value="" />
<input type=button class=arriba onClick="achicar()"
title="CIERRA" value="" /></center>
<div id="barra1"><div id="texto1">QWERTYUIOP. QWERTYUIOP.
QWERTYUIOP. </div></div>
<div id="pag">
<h2>Panel superior se abre con animación y botones.</h2>
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"
alt="IMAGEN">
</div>
</body>
</html> Como dato adicional, ese "
zoom" también funciona en
Internet Explorer 6; aunque no sé cuánta utilidad tendrá, sabiendo que
Microsoft ya le había puesto uno propietario con CSS.
El cambio de formato más evidente son los botones en forma de flecha, reemplazando a los falsos enlaces que estaban bajo el panel.
Y resulta que se ven perfecto en
IE y en
Opera. No en
Firefox : están desfasados.
Estuve peleando la última semana con un efecto que no anda en
Opera y no sé por qué. Como me siento un inútil con baja autoestima, no quiero fracasar también en descubrir el motivo para que un botón me quede más abajo que el otro. Por eso les dejo el ejemplo, para ver si alguien le encuentra —o le encontró— una explicación razonable.