Tabla css con texto centrado verticalmente en ie

Vladi_li · #1 (**permalink**) 06/09/2007, 15:54

Hola como estan? queria saber si alguien me puede ayudar con un codigo que en serio me ha hecho pensar e investigar mucho y no logro solucionarlo. Tengo digamos que la mitad de lo que tengo pensado hacer, estoy creando una especie de tabla con css, la cual necesito que si una columna crece mas que las demas, las demas crezcan a la misma altura y ademas que el texto se mantenga centrado verticalmente. Me funciona correctamente en firefox pero no se me centra verticalmente el texto en el explorer. Si alguien me puede ayudar se los agredeceria muchisimo. Aqui les dejo el codigo para que vean como esta el asunto:

Código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alturas Identicas</title>
<style type="text/css">

body { font: 95%/1 Arial, "Times New Roman", Times, serif; color: #000; background: #fff; }

#container { width: 30em; margin: 0 auto; }
#one { background: #ccc; width: 5em; padding: 0 0.1em; vertical-align:middle;}
#two { background: #eee; width: 14em; padding: 0 0.1em; vertical-align:middle;}
#three { background: #ccc; width: 5em; padding: 0 0.1em; vertical-align:middle;}

#blocks { display: table; }
#blocks-row { display: table-row; position: relative; }
#one, #two, #three { display: table-cell; position: relative; }
</style>
<!--[if IE]>
<style type="text/css">

#one, #two, #three { float: left;}
#one, #two, #three { padding: 0.1em 0.1em 100em 0.1em; margin: 0 0 -98.5em 0;}
#blocks-row { overflow: hidden; float: left;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
 <div id="blocks">
    <div id="blocks-row"> 
      <div id="one"> 
        <p>Las ayudas audiovisuales son esenciales porque transmiten la in-formación 
          eficazmente, añaden variedad a la presentación y ayudan a mantener el 
          interés de la audiencia. </p>
      </div>
      <div id="two"> 
        <p>Las ayudas audiovisuales deben ser sencillas, de buena cali-dad y grandes. 
        </p>
      </div>
      <div id="three"> 
        <p>Las ayudas audiovisuales innecesarias también perjudican la charla; 
          cada recurso audiovisual debe contribuir significativamente al contenido 
          de la presentación.</p>
      </div>
    </div>
 </div>
</div>
</body>
</html>