Al final estudié lo de los nodos. Pero ahora que salieron nuevas versiones de navegadores seguro voy a tener que mirarlos de nuevo. Igual los uso poco, así que no me pregunten porque no me acuerdo. ;)
Volví porque hay un detalle del código anterior que conviene aclarar. Dije que pongo ejemplos para que los adapte quien los tenga que usar. Y es un motivo (o excusa) para haber metido los
div y no algún elemento de lista que sería más 'sintáctico'.
Por otro lado, aprovecho que estoy por aquí y dejo otro ejemplo.
Existe una recomendación por parte del
W3C para no modificar el formato de marcadores de lista desde el CSS. Eso significa que si queremos cambiarle el tamaño o los colores tenemos que usar algún truco. En
Firefox o en
Opera es fácil, porque cambiando las propiedades de
font arrastramos las de viñetas; pero
Internet Explorer se tomó en serio lo del estándar y nos ignora el tamaño, así que tenemos que usar un
hack un poco más complejo.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MARCADOR DE LISTA.</title>
<style type="text/css">
body { color:white; background-color: black; font-size: 100%;}
ul { background-color: transparent; font-size: 2em; }
li { margin-left: 1em; font-size: 1em; line-height: 0.8em; }
span { font-size: 0.5em; color: white; }
</style>
</head>
<body>
<!--[if IE]>
<style type="text/css">
ul { zoom: 2; font-size: 1em; }
</style>
<![endif]-->
<h2>Viñetas personalizadas. (FF3; Op9; IE7)</h2>
<ul>
<li style="color:red; "> <span>qwertyuiop<br>qwertyuiop </span></li>
<li style="color:green; "> <span>qwertyuiop<br>qwertyuiop </span></li>
<li style="color:blue; "> <span>qwertyuiop<br>qwertyuiop </span></li>
</ul>
</body>
</html>