Foros del Web - Ver Mensaje Individual

kseso? · #12 (**permalink**) 29/08/2009, 06:18

Lo cierto es que es "sencillo" para los navegadores. Los emuladores que van por libre (léase ie6 e ie7 emulados en ietester) habrá que seguir jugando.

Código html:

Ver original<!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>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
#ejemplo {
display:table;
margin:0 auto;
padding:20px;
vertical-align:middle;
}
#ejemplo ul {
display:table-row-group;
vertical-align:middle;
}
#ejemplo ul li {
display:table-cell;
list-style-type:none;
vertical-align:middle;
}
#ejemplo ul li a {
background:#CDCDCD none repeat scroll 0 0;
border:1px solid #262626;
color:#444444;
display:table-cell;
max-width:8em;
padding:.5em;
text-decoration:none;
vertical-align:middle;
text-align:justify;
font-size: 1em;
}
#ejemplo ul li a:hover {
text-decoration: none;
color:#cdcdcd;
background: #444;
border: 1px solid #868686;
}
 
</style>
</head>
<body>
<div id="ejemplo">
    <ul>
        <li>
            <a href="#">somos enlaces enlazados</a>
        </li>
        <li>
            <a href="#">que estamos</a>
        </li>
        <li>
            <a href="#">centrados y</a>
        </li>
        <li>
            <a href="#">crecemos por arriba y por abajo</a>
        </li>
        <li>
            <a href="#">en la vertical</a>
        </li>
        <li>
            <a href="#">de nuestro li</a>
        </li>
        <li>
            <a href="#">sin importar el FONT-SIZE que tenemos ni el texto que contenemos</a>
        </li>
    </ul>
</div>
</body>
</html>

ff 3.5, opera 9.6, safari 4, ie8

Personalmente, no me gusta el aspecto que tiene.

Un saludo