Solved

Text in List

Posted on 2011-03-13
4
254 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can't get cursor to change 3 16
Html split(text) Part2 6 23
javascript works in Chrome, but none of the other browsers 14 36
Word Press Fixes to Google Speed Test Issues 2 25
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…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

726 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