UL with custom list images - making text stayaligned - HTML Forums

Franz · 11-22-2009, 03:41 PM

Hello!

I use this CSS statement:
ul {list-style-image:url(bullet.gif);list-style-position:inside;}

The problem is that the text that is longer than a single line ends up being continued under the bullet.gif graphic.

Example:
o Long text element
continued here

How can I make the text say vertically aligned with the first line's first letter?

Example:
o Long text element
__continued here (consider the _ as blank spaces)

Pegasus · 11-22-2009, 04:18 PM

Try changing the list-style-position to outside

Franz · 11-22-2009, 06:17 PM

I set it to inside because if set to outside the bullets 'escape' out of the TD they are in.

sammyP · 12-23-2009, 09:46 AM

I think, the only thing to do is set to outside and set a left margin to the width of the image? But still CSS doesnt define exactly how the image is rendered ( I.e. how much space between the <li> box and the image mainly.), so you may get different results.

CSS doesnt actually define how the marker/bullet is formatted in terms of the CSS postioning model, for either value, of inside or outside, which is annoying.

cascading-style · 12-23-2009, 12:08 PM

Here is a link to a W3Schools example where they show you the 'list-style-image:' CSS and how to use it. You can read the tutorial in the link below it.

http://www.w3schools.com/Css/tryit.a...st-style-image

http://www.w3schools.com/Css/pr_list-style-image.asp