Foros del Web » Creando para Internet » CSS »

Tabla css con texto centrado verticalmente en ie

Estas en el tema de Tabla css con texto centrado verticalmente en ie en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/09/2007, 16:54
 
Fecha de Ingreso: octubre-2006
Mensajes: 4
Antigüedad: 11 años, 1 mes
Puntos: 0
Tabla css con texto centrado verticalmente en ie

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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:16.