Problemas en IE7 con la propiedad LIST-STYLE-TYPE - Enumerando con <li>

[saymon]

Hola a todos,

Les agradeceria una ayuda con este CSS, yo estoy haciendo una pagina en donde estoy enumerando los puntos con titulo y todo, lo cual la pueden ver en este URL http://www.latinpa.com/test/, todo me funciona bien, pero en Internet Explorer 7 y anteriores tengo dos problemas:

1- La enumeracion "upper-alpha" osea las letras, se colocan en la parte baja del parrafo en lugar de estar alineado con la primera linea del parrafo.

2- Y el otro problema es que la numeracion me llega bien hasta el 9 porque cuando llega al punto 10 empiesa de cero.

Alguno de ustedes chicos y chicas, que me puedan ayudar con esto ? se lo agradeceria enormemente, aunque sea diciendome en donde buscar info sobre esto, porque ya e googleado todo el dia y no encuentro nada que me resuelva es problema.

Gracias.

[maycolalvarez]

Seria bueno que mostraras parte del texto y del css para ayudarte, de todas formas puedes usar ietester para probar tu código en varias versiones, pero no es una pureba 100% exacta.

[Nathan_1979]

Muy facil compañero!

Al flotar elementos <li> en I.E resetea los contadores

display:list-item;

y para ponerlo arriba debes poner


vertical-align:top;



Edito: estas 2 propiedades debes ponerlas dentro de la equeta <li>

Veo que usas un div extra en cada list-item, quizás afecte esto a la solución que te dí.

Un saludo!

[saymon]

Gracias maycolalvarez por tu respuesta,

Si yo estoy usando IEtester, y en cuanto al codigo, les habia puesto un URL en donde podian ver la pagina en funcionamiento, http://www.latinpa.com/test/ la he limpiado para que solo aparesca el codigo que deseo resolver.

Y aprovecho para actulizar el hilo, ya le punto dos lo resolvi, asi que solo me gustaria saber como resolver el punto dos, gracias

[Nathan_1979]

Me da a mi que no desaparece, simplemente el 10 se queda en un 0 por que se tapa el 1

Como el html pone margin:0 y padding:0

debes darle un padding-left mayor a la <ol> para que veas la primera cifra a numeros compuestos de 2 o más cifras.


Me explico??

[kseso?]

En vez de colocar el texto dentro de un div, etiquétalo como <p>....</p>
No se el porqué, pero el contador ya se pone en la parte superior del párrafo.

Pero el problema principal y fuente de ese error es que tu página no tiene doctype,con él no influye que el texto esté dentro de un div o un p. Otra cuestión que deberías subsanar es el abuso de mayúsculas, y una tercera observación es que un <ol> o <ul> sólo puede tener como hijos <li>, dentro de un <li> ya puedes alojar otra lista (listas anidadas)
Un saludo

Edito2:
Hola Nathan, se ve que coincidimos en el origen del fallo en lo que estaba editando para ofrecerle además de la solución, la causa.
Saludos

[Nathan_1979]

Desde luego...

Cómo no podemos ayudarte, es si no pones un DOCTYPE....

Es importante, cuantas veces tengo que decirlo...

[saymon]

Hola Nathan, el primer problema lo resolvi con el consejo del vertical-align... y si ya habia visto mi error de que en verdad por el left margin no vei el numero y deducia que se reseteba a cero,

Muchas gracias por su ayuda, ya ahora todo esta corriendo bien, saludos.

[kseso?]

Saymon, no necesitas el vertical-align (además de que sólo lo podrás aplicar a elementos con "display:inline" o "display:table-cell")
Se ve que no me leíste o entendiste cuando te decía:

Pero el problema principal y fuente de ese error es que tu página no tiene doctype

La posición del contador en ie la arreglas añadiendo un doctype a tu html como te decía en el #6.

Un saludo

[saymon]

Gracias kseso por los replay, si yo se que esa pagina no tenia doctype, sorry por no haberselas puesto, pero igual esa pagina solo la hice de rapido para mostrarles solamente el detalle que queria resolver, asi que lo que me mostraron lo aplique a la pagina original, (que tiene cantidad de css y html y mas codigos, motivo por el cual hise esta de ejemplo) y en esa pagina ya me esta funcionando bien todo,

Gracias nuevamente.

[Nathan_1979]

Iniciado por saymon

Hola Nathan, el primer problema lo resolvi con el consejo del vertical-align... y si ya habia visto mi error de que en verdad por el left margin no vei el numero y deducia que se reseteba a cero,

Muchas gracias por su ayuda, ya ahora todo esta corriendo bien, saludos.

Un placer , para cualquier duda... pregunta compañero.

Un saludo!