Solved

Position bullets in a list

Posted on 2013-05-24
5
253 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 500 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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Download a website to hdd 2 68
Not seen Link button 5 39
Why a span is lower 2 20
Pure CSS popout image menu - want the most beautiful style. 7 26
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 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