Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter ta100

    (@ta100)

    Below is how the spacing of long entries (such as “Planting an Organic Vegetable Garden) in sidebar lists roughly looks on my site.

    GARDENING TIPS

    Ideas For Spring

    Planting an Organic

    Vegetable Garden

    Fall Clean Up

    Below is how the spacing roughly should look when such a long entry is used.

    GARDENING TIPS

    Ideas For Spring

    Planting an Organic
    Vegetable Garden

    Fall Clean Up

    I’ve tried but am now clueless how to achieve the spacing in the second example above. How do I change the code below to achieve this? Below is the style.css for the left sidebar.

    #l_sidebar {
    color : #013172;
    font-weight : normal;
    float : left;
    width : 250px;
    margin : 0 0 0 0;
    padding : 10px 0 20px 0;
    line-height : 22px;
    }

    #l_sidebar h2 {
    background : #ffffff url(images/headline_left.gif);
    color : #ffffff;
    font-size : 11px;
    font-family : Arial, Tahoma, Verdana;
    font-weight : bold;
    text-transform : uppercase;
    margin : 10px 0 5px 0;
    padding : 3px 0 3px 10px;
    }

    #l_sidebar p {
    padding : 0 0 0 0;
    margin : 0;
    line-height : 20px;
    }

    #l_sidebar p a {
    color : #013172;
    font-weight : bold;
    text-decoration : underline;
    }

    #l_sidebar p a:hover {
    color: #2255aa;
    font-weight: bold;
    text-decoration: underline;
    }

    #l_sidebar ul {
    list-style-type : none;
    margin : 0 0 10px 0;
    padding : 0;
    }

    #l_sidebar ul li {
    list-style-type : none;
    margin : 0 0 5px 0;
    padding : 0;
    }

    #l_sidebar ul ul {
    list-style-type : none;
    margin : 0;
    padding : 0;
    }

    #l_sidebar ul li li {
    background : #ffffff;
    padding : 0 0 0 15px;
    margin : 0;
    border-bottom : 1px solid #eeeeee;
    }

    #l_sidebar ul li li a {
    color : #013172;
    font-weight : normal;
    text-decoration : none;
    }

    #l_sidebar ul li li a:hover {
    color : #2255aa;
    font-weight : normal;
    text-decoration : underline;
    }

    #l_sidebar ul li ul li {
    background : #ffffff;
    padding : 0 0 0 15px;
    margin : 0;
    }

    #l_sidebar ul li li a {
    color : #013172;
    font-weight : normal;
    text-decoration : none;
    }

    #l_sidebar ul li li a:hover {
    color : #2255aa;
    font-weight : normal;
    text-decoration : underline;
    }

    Thread Starter ta100

    (@ta100)

    I posted this last night. Does anyone know what code I should use to make this?

    Thread Starter ta100

    (@ta100)

    updating so page is not lost in list.

    Do you have a site link for us to have a better look?

    Are these post titles/links or page links?

    Thread Starter ta100

    (@ta100)

    Thanks so much for responding, henkholland. The examples above happen to be lists of pages I put in a sidebar pages widget. However, it could have been any kind of widget, like recent posts, or links.

    The URL is https://hotsmoothdudes.com/ To adhere to the guidelines of this forum, please note: This is an adult website, but the adult content has temporarily been removed so that people can perhaps solve this technical problem. When the issue is resolved or when the adult content is put back, I will post a reply not to go to the URL address.

    Thread Starter ta100

    (@ta100)

    You will see this effect under “Tips and Topics” in the left sidebar, but it probably applies to any list in any sidebar on the site.

    Thread Starter ta100

    (@ta100)

    refreshing the post so people can see it and hopefully figure it out.

    Ok, this looks better:
    Find in style.css (regel 556) and change to:

    #l_sidebar ul li ul li {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF none repeat scroll 0 0;
    margin:0;
    padding:5px 0 5px 15px;  /*THIS WAS 0 0 0 15px  */
    }

    Find in style.css (regel 480)

    #l_sidebar {
    color:#013172;
    font-weight:normal;
    line-height:18px;    /* THIS WAS 22px */
    }

    Thread Starter ta100

    (@ta100)

    Thanks! I am trying this code out right now and will tell you in a while the result.

    Thread Starter ta100

    (@ta100)

    Henkholland, it worked! In #l_sidebar, I only changed the line-height because I think I needed to have the width of the sidebar in it. I put it to 16 and it still works. I have to see which spacing I like best.

    With the #l_sidebar ul li ul li, it worked with the exact code you had, but the W3C CSS Validator gave me errors that the three moz things do not exist or something. So I took them out, still works, and the validator shows no errors.

    The most important thing is that you resolved this sticky problem. I am sincerely grateful! Thanks and for taking time to read my inquiry.

    Thread Starter ta100

    (@ta100)

    PLEASE NOTE: To comply with the guidelines of this forum, the URL given for the site in this post should NOT be visited any more. As the this post is now resolved, the adult content that was removed from the site for the purposes of this discussion have been put back on the site. Please do not visit the URL above. Thanks.

    Ok, good for you Ta100. As topic starter you can mark the topic RESOLVED at the right hand side of this screen.
    And W3c always gives the moz stuff warnings; I have them and igon ore them.
    BTW I could advise you with only the help of Firefox and Firebug. How?
    Get Firefox and then the free Firefox addon Firebug. You can then click anywhere in your site and see what piece of the css influences that piece of your site and you can even make changes but not save them, so it is safe to practice.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘spacing of lines in sidebar lists is off’ is closed to new replies.