Solved

Text in List

Posted on 2011-03-13
4
242 Views
Last Modified: 2012-08-13
hI -
 
How can I  move the text in the ol and ul lists.  In the  ol I need text closer to the number. In the ul I need text not so close to bullets.

http://www.attinc.com/software1.html

CSS
ul {
      font-family: Arial, Verdana, sans-serif;
      font-size: 13px;
      text-align: left;
      list-style-position: inside;
      list-style-type: none;
      margin-left: 0;
      list-style-image: url(images/bdot-sm.gif);
      
}

ol{
      margin: 0px;
      padding-left: 4px;
      list-style-position: inside;      
}

Thank you,
Frieda
0
Comment
Question by:fmv503
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35122987
try this marker-offset property
http://www.cssportal.com/css-properties/marker-offset.htm

don't think it is possible without css3
0
 
LVL 9

Accepted Solution

by:
sah18 earned 500 total points
ID: 35128238
To increase the spacing between your bullets and the text change your list-style-position to outside, then you can use text-indent to increase the spacing between the two:

ul {
      font-family: Arial, Verdana, sans-serif;
      font-size: 13px;
      text-align: left;
      list-style-position: outside;
      list-style-type: none;
      margin-left: 0;
      list-style-image: url(images/bdot-sm.gif);
      text-indent: 10px;
     
}
0
 
LVL 9

Expert Comment

by:sah18
ID: 35128277
Similarly for your ordered list, change the list-style-position to outside, then specify a negative value for the text-indent:

ex:

ol{
      margin: 0px;
      padding-left: 4px;
      list-style-position: outside;      
      text-indent: -3px;
}
0
 

Author Closing Comment

by:fmv503
ID: 35162677
Thank you!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now