A mí no me anda. Lo único que consigo con
Código:
list-style-position: outside; /*inside*/
es que la viñeta me aparezca fuera o dentro del bloque de lista, lo que sólo sirve para incluirla (o no) en el color de fondo, ya que se ve en la "columna" izquierda, o como "primer caracter" del contenido del ítem.
Pero el mensaje me sirvió (¡después de casi 3 años!) para entender cuál era la diferencia. Aquella vez lo miré seguramente con
IE5.x / 6, hoy lo hago con la versión 7; y les dejo un código con algunas pruebas.
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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body { color:white; background-color: black; }
ul { margin-left: 10px; padding-left: 100px; background-color: blue; }
li { margin-left:45px; background-color: maroon; }
.sinOutsideP { padding-left:55px; background-color: olive; }
.conOutsideP { padding-left:55px; background-color: purple; list-style-position: outside; }
.sinOutsideM { margin-left:55px; background-color: olive; }
.conOutsideM { margin-left:55px; background-color: purple; list-style-position: outside; }
.enBloqueN { margin-left:45px; background-color: gray; }
.enBloqueR { margin-left:45px; background-color: gray; position: relative; left: -10px; }
</style>
</head>
<body>
<h2>Prueba de listas.</h2>
<ul>
<li>qwertyuiop<br>qwertyuiop 1</li>
<li>qwertyuiop<br>qwertyuiop 2</li>
<li class="sinOutsideP">qwertyuiop<br>qwertyuiop 3p</li>
<li class="conOutsideP">qwertyuiop<br>qwertyuiop 4p</li>
<li class="sinOutsideM">qwertyuiop<br>qwertyuiop 3m</li>
<li class="conOutsideM">qwertyuiop<br>qwertyuiop 4m</li>
<li><div class="enBloqueN">qwertyuiop<br>qwertyuiop 5n</div></li>
<li><div class="enBloqueR">qwertyuiop<br>qwertyuiop 5r</div></li>
</ul>
</body>
</html> Lo del
div anda, pero con posición relativa, lo que trula a
Opera; se puede arreglar metiendo un
display: list-item, pero se trula
Firefox (
IExplorer se da cuenta de la redundancia y lo ignora).
De cualquier forma, el asunto ahora se arregla con
padding; menos lo de acercar el
bullet, como mencioné más arriba. Si alguien lo quiere revisar, no sé si éste será el mejor tema, porque todavía no estoy seguro de que
thisisalexis haya querido juntarlos.
Marcadores del liasta fuera de lugar usando css y viñetas