Foros del web, para los que viven de bits

Holas, tengo un pequeño gran problema para mi, tengo unas cajas de contenido en el que trabajo con css, todo bien puse mi imagen de lista, lo alinee a la caja (q esta en una tabla), todas las lineas parten de la misma posicion osea justificado, peroooo, se me ocurrio q el espacio entre la imagen de lista y la primera letra era mucha, asi q busque la forma de acortarla, y encontre en unos de los post el uso de text-indent, pero solo funciona para la primera linea, para las demas no se como hacer, el amigo caricatos puso q debia utilizar margin-left pero todo se me malogra ; el codigo q tengo es:

ul {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;
margin: 2px 0px 2px 0px;
}

ul li{
list-style-image: url(../img/bullet.gif);
margin: 2px 1px 2px 19px;
margin-left: 0px;
}

tal vez este haciendo algo mal, el resultado q me gustaria tener es con un minimo de espacio entre la primera letra y la imagen de lista y las lineas siguientes alineadas con la primera, espero puedan ayudarme, gracias!

lo de ".ul" me suena extraño. ¿Has probado a poner "ul" sin el punto? Puesto que quieres darle estilo al tag ul, este, al igual que haces con "li", debe ir sin punto.

Mira a ver si es eso.

Un saludo

Zerjillo

si, lo del punto fue un error de transcripcion porque los tenia como clases, y para q se vea mas claro lo cambie pero no borre el punto, gracias por la aclaracion, bueno si me pudieran ayudar con mi problema porfa

Prueba modificando el valor padding-left y margin-left (ambos) de los li, que traen algo de esto por default.

Gracias por responder amigo Ramm, he seguido tus recomendaciones y las trate de aplicar pero nada, con el list-style-position: inside logro reducir el espacio entre la imagen y la primera letra, como con text-indent, pero no puedo con las demas lineas. Cambie algunas cosas en mi codigo

.lista {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 11px;
list-style-image: url(../img/bullet.gif);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.lista li{
margin-top: 2px;
margin-bottom: 2px;
margin-left: 19px;
padding-left:0px;
}

produce el mismo resultado q el primero, trate de seguir lo q me dijo Ramm, al modificar el padding-left tanto en valores negativos o positivos no se modifica en nada, como dije no se como conseguir el alineamiento

Porfa, agradeceria enormemente una ayuda con mi problemilla

Hola buenas noches:

prueba con esto:

* {margin:0px;border:0px;padding:0px;}

Salu2.

Hola, gracias por contestar, pero tu respuesta pone todo el texto de las listas al lado izquierdo, quitando las imagenes; pongo "margin-left: 19px;" para q me muestre el texto sin dejar de mostrar las imagenes (viñetas) de la lista, ya que reduciendolo se va para la izquierda.Este problemilla tendra solucion? que estoy haciendo mal??!!

Hola:

Poniendo * {margin=0px; border=0px; padding=0px;} eliminas todos los márgenes, bordes y espaciados interiores que cada navegador incorpora a los elementos html, en este caso ul y li.

A partir de ahí puedes definirlos, a tu gusto, aplicandolos a ul y li.

Pon el código html de la lista y la parte css que le tienes asignada, y como quieres que te quede.

Salu2.

bueno para aclarar el tema, mis listas estan en una tabla ,luego el codigo que tengo en la pagina es:

y en mi hoja de estilos:

el margin-left: 19px; es porq si le pongo menos se oculta la imagen de la viñeta

Dejo las imagenes, la primera es como esta actualmente:




y asi me gustaria que quede, les juro que he probado las maneras de hacerlo pero nada



Espero se resuelva esto, gracias!

Hola MaXaC.

Con CSS2.
Con CSS1.

Seguramente podrias apañarte con un:
list-style-position: inside;