Marcadores del liasta fuera de lugar

[xav]

Hola amigos, tengo un par de problemas que hace tiempo no puedo resolver y es que tengo en una <ul> items que ocupan varias lineas cuyo marcador (el puntito) se posisiona en la última línea y no en la primera, es decir cada item no comienza con ningún marcador. Y el otro problema es que elegí list-style-type: upper-alpha pero me aparecen todas letras A. Si alguien me pudiese aportar algún dato o solución le estaría muy agradecido. Bueno, me despido, saludos y hasta la próxima.

Javier.

[jam1138]

... personalmente no alcanzo a comprender la idea, bueno sería mostrarás el código que manejas...

Bienvenido!

[xav]

Entre las etiquetas <li> y </li> tengo texto suficiente como para que el item se vea como un bloque de código de 3 líneas altutra. El inconveniente es que el punto o marcador del item, que debería ubicarse a la izq. de la primer línea, se ubica a la izq. de la tercera. He probado list-style-position, marker-offset, margin, list-style-type pero sin tener éxito y no he encontrado en la web información alguna acerca del posicionamiento del marcador ni referencia a este problema. ¿Puede hacerse referencia al marcador para posicionarlo? Gracias de antemano. Saludos.
xav.

El código html es:
-----------------

<p>bla bla bla..</p><br>
<ul class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ul>
<p>bla bla bla..</p><br>


y el código css correspondiente es:
----------------------------------

..lista3 li{
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
}

[Jorolo]

Hola a todos, hola xav

A tu código no le veo ningún problema, lo he probado y funciona correctamente, incluso he reducido el ancho de los li a 'width: 150px;' y se ve corectamente, todo en su sitio.

El problema tiene que estar en otro lado.

Sobre el list-style-type

[¿es a mi?]

Hola
Yo lo veo bien con Firefox, pero no con IE, que se ve como xav dice.

[Jorolo]

Iniciado por ¿es a mi?

Hola
Yo lo veo bien con Firefox, pero no con IE, que se ve como xav dice.

Hola a todos.

Pues ya sabeis donde esta el problema.

[¿es a mi?]

Cierto, ocurre en IE al limitar el ancho a 250 px. El por qué no lo sé, pero como bien dice Jorolo... ¡ya sabéis donde está el problema!
Un saludo

[xav]

Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos? ¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.? Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.
Desde ya les agradezco.
Xav.

[xav]

Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos? ¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.? Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.
Desde ya les agradezco.
Xav.

[Jorolo]

Iniciado por xav

Ok agradezco su ayuda y la atención dedicada a mi problema pero, sin mostrar desconformidad alguna (sino todo lo contrario) y sabiendo ahora dónde está el problema, pregunto: qué es lo mas aconsejable en estos casos?

Buena pregunta

Iniciado por xav

¿Debo resignarme a no usar listas cuando algún item supere la atura de una línea

Rendirse es de cobardes.

Iniciado por xav

o ,cosa que no veo como una solución viable, debería considerar la opción de ignorar a i.e.?

Si no lo ves viable no lo hagas.
Algunos lo hacemos, pero lo cierto es que yo en ese sentido soy un privilegiado, los usuarios IE no están entre mi "público objetivo".

Iniciado por xav

Pido algún consejo porque he revisado las especificaciones de CSS2 del SIDAR y he vuelto a hacer nuevos intentos sin poder resolverlo hasta el momento.

Hay una tercera opción, los hacks. Escribes tu codigo correctamente (tal y como lo estas haciendo) y para las cosas que no funcionan en IE usas un hack.
¿Cual?¿como? ni idea.

[frijolerou]

1.- Si vas a definir una secuencia con los elementos de la lista (A, B, C...) debes usar OL (lista ordenada o secuencial) y no UL (lista desordenada).

2.- El problema en IE lo está provocando la propiedad width en los elementos de la lista. Tal vez desde ahí debieras empezar a buscar la solución.

3. La solución más cercana que encontré fue:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.lista3{
	list-style-type:upper-alpha;
	list-style-position:inside;
	width:250px;
	}
.lista3 li{
	margin:0;
	}
</style>
</head>
<body>
<div>
<ol class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ol>
</div>
</body>
</html>

[furoya]

Hola todos :

Encontré otra forma

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<style>
.lista3 li{
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
background-color :yellow;
/* PERMITE ALINEAR LA VIÑETA (middle ; bottom)*/ 
vertical-align: top;
/*AJUSTE FINO DE POSICIÓN*/ 
position: relative;
top: -5px;
}

</style>

<BODY>



<p>bla bla bla..</p><br>
<ul class="lista3">
<li>Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li>Documento Nacional de Identidad</li>
<li>Fotocopia de partida de nacimiento legalizada</li>
<li>2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li>Certificado de Grupo Sanguíneo y Factor RH</li>
</ul>
<p>bla bla bla..</p><br>


</BODY></HTML>

Habría que estudiar razones y posibilidades de ésto.

saludos

[edit]

Epa!. No había visto lo de

Iniciado por xav

...elegí list-style-type: upper-alpha pero me aparecen todas letras A...

Es un bugtosaurius. La única solución que hallé es

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<style>
ol{list-style-type:upper-alpha;}
.lista3 li{
left:10px;
clear:both;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:250px;
text-align:left;
font-size:12px;
margin:0;
color: #000000;
line-height:17px;
background-color :yellow;
/* PERMITE ALINEAR LA VIÑETA (middle ; bottom)*/ 
vertical-align: top;
/*AJUSTE FINO DE POSICIÓN*/ 
position: relative;
top: -5px;
}

</style>

<BODY>

<p>bla bla bla..</p><br>
<ol class="lista3">
<li value="1">Certificado de estudios secundarios o constancia provisoria de haber finalizado</li>
<li value="2">Documento Nacional de Identidad</li>
<li value="3">Fotocopia de partida de nacimiento legalizada</li>
<li value="4">2 fotografías de 4 x 4 de frente (no instantáneas)</li>
<li value="5">Certificado de Grupo Sanguíneo y Factor RH</li>
</ol>
<p>bla bla bla..</p>

</BODY></HTML>

[/edit]