css list-style-image text problem if li text wrapping

[paulonline2501]

hi everyone, im having trouble with some custom images im adding to a site.i have made a picture of a tick that i want to be display next to each li. im using the list-style-image css property to do this. the image is displaying as i would like. however, the text of the li is doing something that i dont want, when the text doesn't fit on one line. the first line will be at the top of the image, but the 2nd line will be at the bottom of the image. i want it and would expect it to appear directly under the first line. this means the list is very confusing to read with big gaps between the 1st and 2nd line of items but small gaps between 2nd line of one item and the first line of the next item. very confusing! how can i get the lines of text for each list item to appear under each other normally. the CSS code:

.tick li{list-style-image: url(../_images/tick.jpg);padding:2px 2px 2px 2px;/*top, right, bottom, left*/vertical-align:top;}.tick ul{padding:2px 2px 2px 2px;/*top, right, bottom, left*/}

the list code:

<ul class="tick"><li>asd asdasdasdasdasdasd asd a sd as da sd as da sdasdasd aa sd as d asd a sd as d asda sd as d asd</li><li>asd asdasdasdasdasdasd asd a sd as da sd as da sdasdasd aa sd as d asd a sd as d asda sd as d asd</li><li>asd asdasdasdasdasdasd asd a sd as da sd as da sdasdasd aa sd as d asd a sd as d asda sd as d asd</li><li>asd asdasdasdasdasdasd asd a sd as da sd as da sdasdasd aa sd as d asd a sd as d asda sd as d asd</li></ul>

you can see the page here. if it looks fine, ive fixed it!

Edited June 22, 2013 by as_bold_as_love

[niche]

Try adding margins to get them positioned correctly. You might even try divs instead of li.

Edited June 22, 2013 by niche

[dsonesuk]

Don't use list-type image its difficult to control image position, use background image for li, and use margin on span using display: block; to move text away from image, vertical-align is mainly use for table elements, or elements that use display: table; and display: cell;

<ul class="tick"><li><span>You can change the text on pages</span></li><li><span>You can add pictures</span></li><li><span>You can easily add products and sell them via paypal (the buttons are automatically created)</span></li><li><span>You can add Feature boxes</span></li><li><span>Allow your customers to join/unsubscribe from mailing lists</span></li><li><span>Set up automatic jobs to send emails to your customers as often as you want</span></li></ul>

.tick li {	background: url("../_images/tick.jpg") no-repeat scroll 0 0 transparent;	list-style: none outside none;	min-height: 40px;	padding: 2px;text-indent:0; /*some browsers use default setting for this*/} .tick li span {	display: block;	margin-left: 30px;}

[paulonline2501]

thanks dsonesuk. ive used your example, and its working well.its seems a bit of a shame though that list-style-image seems to have this bug.i say bug, because i cant really see why you would want the text to act like that.maybe im missing the point?maybe w3c could add an attribute to control this?

[dsonesuk]

The list-style is positioned using margins and padding, if you wish it to be vertically aligned in middle depending on various number of text rows, its very difficult to achieve this with margins and padding, whereas background positioning gives you 'center left', which i find makes it much easier.