WordPress.org

Ready to get started?Download WordPress

Forums

List spacing is too large- how can I adjust? (8 posts)

  1. queenspindles
    Member
    Posted 1 year ago #

    Hello all,

    how can I reduce the spacing between each sentence on my lists?

    You can see an example on my homepage: http://www.maisiehill.com/

    And here's the code:

    /* Begin Lists */
    html > body .entry ul {margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: 0px;}
    html > body .entry li {margin: 7px 0 8px 10px; list-style-type: square;}
    .entry ol {padding: 0 0 0 35px; margin: 0;}
    .entry ol li {margin: 0; padding: 0; list-style: decimal outside;}
    .postmetadata ul, .postmetadata li { display: inline; list-style-type: none; list-style-image: none;}
    .entry dl { margin: 1.5em 0pt; }
    .entry dd{margin:0; padding:0 15px 15px; }
    .entry table { margin: 0pt auto;}
    .entry th, .entry td { height: 1em; line-height: 18px; padding:10px; }
    ol li, #sidebar ul ol li {list-style: decimal outside;}
    
    ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6 {}
    ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li, ul.bullet-6 li {list-style-image:none; list-style-position:outside; list-style-type:square; margin-bottom:5px !important; padding-bottom:3px !important; padding-left:22px !important;}
    ul.bullet-1 li {background:url(images/bullets/3.gif) no-repeat 0 5px;}
    ul.bullet-2 li {background:url(images/bullets/4.gif) no-repeat 0 5px;}
    ul.bullet-3 li {background:url(images/bullets/1.gif) no-repeat 0 5px;}
    ul.bullet-4 li {background:url(images/bullets/2.gif) no-repeat 0 5px;}
    ul.bullet-5 li {background:url(images/bullets/5.gif) no-repeat 0 5px;}
    ul.bullet-6 li {background:url(images/bullets/6.gif) no-repeat 0 5px;}
    /* End Entry Lists */

    [please mark any code - http://codex.wordpress.org/Forum_Welcome#Posting_Code - btw: there is no need to post css code as this is accessible from the link to your site.]

    Thank you!

  2. jnhghy
    Member
    Posted 1 year ago #

    Hi,
    you want to reduce the line spacing between the bullets? or between titles and content? or both? ether way this article should help you.
    Regards

  3. queenspindles
    Member
    Posted 1 year ago #

    Thanks!

    I've changed the line spacing between the bullet points to normal, hopefully it'll work (for some reason it takes a while for any changes I make to the style sheet to show up).

    Cheers!

  4. queenspindles
    Member
    Posted 1 year ago #

    I've changed it but nothing has changed, any tips?

    This is how it looks at the moment:

    /* Begin Lists */
    html > body .entry ul {margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: 0px;}
    html > body .entry li {margin: 7px 0 8px 10px; list-style-type: square;}
    .entry ol {padding: 0 0 0 35px; margin: 0;}
    .entry ol li {margin: 0; padding: 0; list-style: decimal outside;}
    .postmetadata ul, .postmetadata li { display: inline; list-style-type: none; list-style-image: none;}
    .entry dl { margin: 1.5em 0pt; }
    .entry dd{margin:0; padding:0 15px 15px; }
    .entry table { margin: 0pt auto;}
    .entry th, .entry td { height: 1em; line-height: normal; padding:10px; }
    ol li, #sidebar ul ol li {list-style: decimal outside;}
    
    ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6 {}
    ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li, ul.bullet-6 li {list-style-image:none; list-style-position:outside; list-style-type:square; margin-bottom:5px !important; padding-bottom:3px !important; padding-left:22px !important;}
    ul.bullet-1 li {background:url(images/bullets/3.gif) no-repeat 0 5px;}
    ul.bullet-2 li {background:url(images/bullets/4.gif) no-repeat 0 5px;}
    ul.bullet-3 li {background:url(images/bullets/1.gif) no-repeat 0 5px;}
    ul.bullet-4 li {background:url(images/bullets/2.gif) no-repeat 0 5px;}
    ul.bullet-5 li {background:url(images/bullets/5.gif) no-repeat 0 5px;}
    ul.bullet-6 li {background:url(images/bullets/6.gif) no-repeat 0 5px;}
    /* End Entry Lists */
  5. alchymyth
    Forum Moderator
    Posted 1 year ago #

    I've changed it

    what number values in which of the lines?

    checking with Firefox' web developer add-on, this seems the line which is regulating the space between the list items:

    html > body .entry li {margin: 7px 0 8px 10px; list-style-type: square;}

    make sure to clear the browser cache after changes to the stylesheet - 'CTLR F5' or 'reload' or whatever it takes ...

  6. queenspindles
    Member
    Posted 1 year ago #

    Thanks for your response Alchymyth.

    I changed this line using the guidance in the helpsheet another user provided. I changed the line-height to 'normal'.

    .entry th, .entry td { height: 1em; line-height: normal; padding:10px; }

    I have been clearing the browser cache, but any time I make a change it takes a while to show up, though this time nothing has happened.

  7. alchymyth
    Forum Moderator
    Posted 1 year ago #

    th, and td is for tables - you are using an unordered list ul and li; for which the space between list items is done by using margin or padding on the style of li;

    try changing the margins in:

    html > body .entry li {margin: 7px 0 8px 10px; list-style-type: square;}

    http://www.w3schools.com/css/css_list.asp

  8. ccarlow
    Member
    Posted 1 year ago #

    I would like to change the line height or margin in my custom menu and list items located in the right side bar of my website http://www.NaturesHealing.info. The spacing appears double-spaced. What can I do? I tried using code in the CSS tab - li{margin-bottom: 0px;} - of course this affects the entire site but the spacing in sidebar doesn't reduce any more than what you see. The same code will expand the spacing but there must be something else that is not allowing this spacing to reduce. When I look at the source code I only see Li tags with links - one after another - see code

    <div class="menu-menu2-container"><ul id="menu-menu2" class="menu"><li id="menu-item-1359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1359"><a href="http://natureshealing.info/testimonials/">Testimonials</a></li>
    <li id="menu-item-1362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1362"><a href="http://natureshealing.info/evidence-based-protocols/">Evidence-Based Medical Protocols</a></li>
    <li id="menu-item-1363" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1363"><a href="http://natureshealing.info/more-than-acupuncture/">Acupuncture and more…</a></li>
    <li id="menu-item-1361" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1361"><a href="http://natureshealing.info/charts/">Forms & Charts</a></li>
    <li id="menu-item-1365" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1365"><a title="Patient History Form" href="http://natureshealing.info/wp-content/uploads/2012/12/Patient_Info_History_Form.pdf">Patient History Form</a></li>
    </ul></div>

Topic Closed

This topic has been closed to new replies.

About this Topic