How do I align text on a multiple-line bulleted css list?

Hi, I just a simple css question that I've been struggling with. I'm customizing my wordpress blog that I've set up and I've having trouble with some bulleted lists. I'm using a background image as my bullets and I've set the bullets to display inside a box (as opposed to having the bullets on the outside). The problem is, when I set the list-style-position to "inside", it pushes the text in but only the first line of text. I'm working to make sure that all the text lines up nice and clean, but I just can't make it happen. Any suggestions at what I'm doing wrong?  Here's my css:

#right ul {
        margin-left: 3px;
      padding: 0px 0px 0px 2px;
        list-style-type: none;
      }
      
#right  li {
        list-style-image: url(images/bullet-arrow.gif);
        background-repeat: no-repeat;
        list-style-position: inside;
      }

you can see what I'm working on at:  http://209.200.225.119    (I'll have a domain very soon)
-don't mind all the strange stuff written here, it's just practice :)

Question 2.

You can also probably see that I have an image at the top of the page with text wrapped around it. Problem is the wrapped text doesn't align with the top of the picture vertically. The image is placed with the <p> tags and the css is as follows:


img.left {
        display: block;
        float: left;
        clear: left;
         }

Thanks, any help would be most appreciated :)

Jason
zebingAsked:
Who is Participating?
 
Jeffrey DakeConnect With a Mentor Senior Director of TechnologyCommented:
One way to make all your text line up would be to use a background-image on the LI rather than a list-style-image and then put a padding left on the LI have the width of your image.  This will make all the text line up.
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
Also I noticed that after your img tag you have a <br/> tag that seems to be causing your gap between the text and img.  Let me know if this does not help you
0
 
zebingAuthor Commented:
jman56:

You're first solution worked like a charm! Thanks so much for the assistance!

Just for the future generations that might read this later, I also had to adjust the bullet background image vertically using this on the <li> tag:

background-position: -.2em .3em;

Now it works great, thanks.
0
 
zebingAuthor Commented:
Here was the final CSS for any body else finding this:

#right ul {
        margin-left: 3px;
      padding: 0px 0px 0px 0px;
        list-style-type: none;
      }
      
#right li {
       
        background-image: url(images/bullet-arrow.gif);
        background-repeat: no-repeat;
        list-style-position: inside;
        margin-bottom: 7px;
        padding-left: 16px;
        background-position: 0em .3em;
0
 
zebingAuthor Commented:
Just for the record, that I didn't check that answer in other browsers before I accepted it. I know, I know, beginner mistake. Here's what yielded consistent results in IE6, FF, and Opera

#right ul {
        margin-left: 0px;
      padding: 0px 0px 0px 0px;
        list-style-type: none;
      }
      
#right li {
        margin: 0 0 0.6em 0;
        padding: 0 0 0 19px;
        background: url('images/bullet-arrow.gif') 5px 0.17em no-repeat;
        }
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.