?
Solved

Position bullets in a list

Posted on 2013-05-24
5
Medium Priority
?
264 Views
Last Modified: 2013-05-24
I have a bullet-ted list and the bullets are over writing the text .How can i move the bullets
to the left of the text?

http://roofgenius.com/test2.asp
0
Comment
Question by:isnoend2001
  • 3
  • 2
5 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 39195564
Since you are using a background image on the <li> elements, you will need to declare some left padding to clear the text from the image.

On the .graybox li declaration, add padding-left: 15px;  You could adjust the padding amount to your liking.
0
 

Author Comment

by:isnoend2001
ID: 39195591
Thanks  jtwcs
Tried that and it adds another bullet and does not move the blue balls
.graybox li{
      line-height:13px;
      padding-left: 15px
      /*list-style:inside url(images/bullet_ball_blue.gif);*/
      list-style-type:none;
      background:url(images/bullet_ball_blue.gif) no-repeat left 2px;
      }
0
 
LVL 10

Accepted Solution

by:
jtwcs earned 2000 total points
ID: 39195603
You are missing the closing ; after padding-left: 15px

Once you fix that, you should see the change.
0
 

Author Comment

by:isnoend2001
ID: 39195624
Whoops, Thanks that did the trick
0
 

Author Closing Comment

by:isnoend2001
ID: 39195627
Thank you
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question