• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1225
  • Last Modified:

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
0
zebing
Asked:
zebing
  • 3
  • 2
1 Solution
 
Jeffrey Dake 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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now