OK so here is my dilemma as I am in the process of a complete redesign of my web site. Where I am inserting a list utilizing the <ul> and <li> tags is my problem.

The settings for this is alls et up in my css file with a custom bullet for each line and here is the coding I am using...



The problem is that the text overlaps the bullet image so I have to put in about 4 nbsp space codes. Here is a test page where you can see what I am talking about... http://www.disneytrivia.net/test1.php . Ideally I would like to have it set up so that the text with multiple lines is completely aligned on the left side with the bullet.

Any help would be appreciated

There are a couple of ways you can do this. You could set a height for the background image and then use your padding to move the bullet image where you want it. However, the best way I find is to set your "background-position" property using top right bottom and left. See if that works for you.

Try "padding: 5px 5px 5px 20px;"

This increases the space on the left side for the background image.

Cary, could you specify what you would like him to apply the padding to.

Where it appears in Ron's post.

Thanks Cary - worked perfectly as you can see here... http://disneytrivia.net/park_pages/wdw_studios_facts.php

I did try adjusting that padding a bit but I didnt add the extra variables in there

EDIT: Ignore this suggestion if everything looks right.



Oh, I think I misread that before. For that try this styling:

Also really not on the subject of CSS but I noticed that anywhere I have text appearing with an asterisk Mozzilla Firefox does not display the character but instead shows a small question mark. Anyway around this?

You have to put this code in the html in place of the star:

&#8727

No you hit the nail on the head with the first adjustment to the code.... thank again