Link to home
Start Free TrialLog in
Avatar of zebing
zebingFlag for United States of America

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of Jeffrey Dake
Jeffrey Dake
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
Avatar of zebing

ASKER

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.
Avatar of zebing

ASKER

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;
Avatar of zebing

ASKER

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;
        }