Positioning images when used in lists

Hi - Any ideas on how to position an image (used instead of an bullet point) in a <ul> list item.

The problem being that the image seems to be out of line with the text. I have altered the font size to try to accommodate but this did not work.

I have already used a background image within the class so cannot go down that route.

Here is the CSS for the list item on the left hand nav box entitled 'Intranet':
ul#c1list li.title{
background-image:url(images/yellow_c1title1.gif);
background-repeat:repeat-y;
border-top:1px solid #FF9900;
border-left:1px solid #ff9900;
padding:0px 0px 0px 10px;
margin:0px;
font-size:2em;
font-weight:bold;
font-family:"Comic Sans MS", Arial;
color:#990000;
background-color:#efef90;
list-style-image:url(images/intranet_home.gif);
list-style-position:inside;}

And here is the url: (you can see the images on most of the list items in the left and right nav boxes are all over the place in IE6 - so any hints would be gratefully received)

http://www.hastings.ac.uk/yellow/index.asp

Btw, thanks Kulegamr for replying to my 'Submit button' query - it worked!

It can't currently be done. Future versions of CSS might support doing it, but for now you're out of luck. The one workaround I've heard is adding extra space to the top/bottom/etc of the image being used - but I tried that and it didn't work for me.

does padding on the list item, also affect the bullet?

I'm thinking top/bottom padding

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

Tried that, doesn't help.

Yes cat you are right, just add extra space on the top of the image. Then:

Code: Select all

ul {
	list-style-image: url(images/bullet.gif)

and your image should be like this (notice the white space at the top):


heres the site i built a few months ago which uses the above:
http://www.ctech3000.com/what_you_get.asp

Many thanks for your replies - adding extra pixels to the top of the .gif worked a treat.

told ya!