Solved

Text in List

Posted on 2011-03-13
4
261 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

691 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