Grow your CSS skills. Land your dream job.

Problem with some list styling

  • # March 3, 2010 at 11:13 am

    Got a bit of a problem with the styling of a list. Here is a screen shot.

    http://img402.imageshack.us/img402/996/listw.jpg

    The list is hanging out of the DIV that it should be contained within. Here is the HTML:

    Code:

    ec lacinia. Nulla ut nulla id nunc porta ultricies at sit amet lectus. Nulla adipiscing, urna nec dapibus suscipit, nisi augue pellentesque lectus, sit amet aliquam orci velit id odio. Proin quis orci sem, id sollicitudin enim. Quisque ut elementum tellus. Maecenas varius pulvinar magna, lobortis vulputate tellus rhoncus vel. In aliquet odio quis massa tincidunt venenatis. Sed scelerisque, purus ac fermentum tincidunt, erat risus interdum tortor, eu placerat sapien lacus sed lorem. Aenean elit tellus, tristique vitae tempor pretium, sodales et lacus. Curabitur nec nisi eros. Aenean ullamcorper vestibulum quam eget iaculis. Morbi ac metus

    • New Installations
    • Rewires
    • Electrical/CCU Upgrade
    • Testing & Inspection
    • Emergency Lighting
    • Fault Finding
    • Fire Alarms
    • Door Entry Systems
    • CCTV & Security Systems

    And here is my CSS:

    Code:
    #right-column ul {
    list-style: circle;
    }

    #right-column li {
    float: left;
    clear: left;
    }

    I have tried using the "clear:" selector on the li and the ul item but has not worked.

    Another thing to note I am also using the following CSS Reset:

    Code:
    /* v1.0 | 20080212 */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: ”;
    content: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    Hope you guys can help. Many Thanks.

    # March 3, 2010 at 11:52 am

    It’s a little difficult to troubleshoot your problem without a link or all your code.

    # March 3, 2010 at 1:20 pm

    Ok here is my HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









    24 HOUR CALLOUT: 07866 510104 | 07889 004903

    Contractors (UK) Ltd

    Electrical, Security
    & Fire Alarm Contractors

    J&C Contractors (UK) Limited

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel quam turpis, vel mattis dolor. Fusce nec neque nec elit condimentum sagittis quis ac enim. Morbi rutrum euismod lorem, id laoreet purus consectetur eget. Praesent condimentum imperdiet urna accumsan posuere. Praesent adipiscing quam a metus commodo dapibus. Aliquam non dolor nunc. Mauris quis pharetra mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam diam magna, interdum eu consectetur in, pretium eu massa. Etiam felis nisl, molestie a pretium ac, ornare sit amet leo. Sed pulvinar dapibus volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vel luctus eros.

    Sed aliquam lorem in quam blandit sollicitudin. Sed justo tellus, mollis ac semper viverra, pulvinar aliquet eros. Vestibulum rutrum mollis tempus. Vivamus vehicula pretium mi eu dapibus. Aenean et odio lorem, ut semper arcu. Suspendisse tempus sodales mi sit amet volutpat. Nulla tristique felis eget tortor rhoncus tempus. Duis eleifend, lacus a egestas fermentum, lacus ipsum fringilla nulla, semper porta libero dui hendrerit metus. Praesent id orci eget lacus gravida congue in sit amet justo. Sed rutrum aliquam nulla, eget viverra quam imperdiet non. Etiam cursus fringilla nisi, non tempus felis congue vel. Etiam est est, sollicitudin in volutpat nec, ullamcorper ac erat. Sed nec magna id lorem dignissim fringilla. Etiam sapien dolor, tincidunt ut ultricies at, rhoncus id felis. Suspendisse potenti. Pellentesque lacus justo, varius id egestas non, placerat at nunc. Donec tincidunt tincidunt mauris, nec vulputate tellus ornare sed. Suspendisse a pretium augue.

    Morbi et purus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum quam libero, rutrum sit amet tempus ut, ornare et enim. Suspendisse erat diam, viverra sit amet aliquam sed, malesuada ac lacus. Sed adipiscing porta ligula nec lacinia. Nulla ut nulla id nunc porta ultricies at sit amet lectus. Nulla adipiscing, urna nec dapibus suscipit, nisi augue pellentesque lectus, sit amet aliquam orci velit id odio. Proin quis orci sem, id sollicitudin enim. Quisque ut elementum tellus. Maecenas varius pulvinar magna, lobortis vulputate tellus rhoncus vel. In aliquet odio quis massa tincidunt venenatis. Sed scelerisque, purus ac fermentum tincidunt, erat risus interdum tortor, eu placerat sapien lacus sed lorem. Aenean elit tellus, tristique vitae tempor pretium, sodales et lacus. Curabitur nec nisi eros. Aenean ullamcorper vestibulum quam eget iaculis. Morbi ac metus pulvinar velit aliquet tincidunt sit amet vitae lectus.

    ec lacinia. Nulla ut nulla id nunc porta ultricies at sit amet lectus. Nulla adipiscing, urna nec dapibus suscipit, nisi augue pellentesque lectus, sit amet aliquam orci velit id odio. Proin quis orci sem, id sollicitudin enim. Quisque ut elementum tellus. Maecenas varius pulvinar magna, lobortis vulputate tellus rhoncus vel. In aliquet odio quis massa tincidunt venenatis. Sed scelerisque, purus ac fermentum tincidunt, erat risus interdum tortor, eu placerat sapien lacus sed lorem. Aenean elit tellus, tristique vitae tempor pretium, sodales et lacus. Curabitur nec nisi eros. Aenean ullamcorper vestibulum quam eget iaculis. Morbi ac metus

    • New Installations
    • Rewires
    • Electrical/CCU Upgrade
    • Testing & Inspection
    • Emergency Lighting
    • Fault Finding
    • Fire Alarms
    • Door Entry Systems
    • CCTV & Security Systems

     

    And here is all of my CSS:

    Code:
    /* ==== RESET FOR CSS ==== */

    /* v1.0 | 20080212 */

    html, body, div, span, applet, object, iframe,

    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

    a, abbr, acronym, address, big, cite, code,

    del, dfn, em, font, img, ins, kbd, q, s, samp,

    small, strike, strong, sub, sup, tt, var,

    b, u, i, center,

    dl, dt, dd, ol, ul, li,

    fieldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

    }

    body {

    line-height: 1;

    }

    ol, ul {

    list-style: none;

    }

    blockquote, q {

    quotes: none;

    }

    blockquote:before, blockquote:after,

    q:before, q:after {

    content: ”;

    content: none;

    }

    /* remember to define focus styles! */

    :focus {

    outline: 0;

    }

    /* remember to highlight inserts somehow! */

    ins {

    text-decoration: none;

    }

    del {

    text-decoration: line-through;

    }

    /* tables still need ‘cellspacing=”0″‘ in the markup */

    table {

    border-collapse: collapse;

    border-spacing: 0;

    }

    /* ==== END RESET FOR CSS ==== */

    /* ==== TYPOGRAPHY ==== */

    h1 {

    display:none;

    }

    h2 {

    text-transform: uppercase;

    font-family: Tahoma, Geneva, sans-serif;

    font-weight: bold;

    font-size: 15px;

    color: #c10000;

    position:relative;

    top: 40px;

    }

    h3 {

    text-transform: uppercase;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 13px;

    text-align: center;

    padding-top: 3px;

    }

    .moduletabletelephone-number p {

    text-transform: uppercase;

    font-family: Tahoma, Geneva, sans-serif;

    color: white;

    font-size: 13px;

    font-weight: bold;

    text-align: right;

    padding-right: 50px;

    padding-top: 10px;

    }

    .moduletabletelephone-number p span {

    color: red;

    }

    /* ==== NAVIGATION ==== */

    ul {

    margin: 0;

    padding: 0;

    }

    li {

    float: left;

    position: relative;

    left: 410px;

    top: 8px;

    }

    ul a {

    padding-right: 25px;

    font-family: Tahoma, Geneva, sans-serif;

    font-weight: 11px;

    text-decoration: none;

    color: white;

    }

    ul a:hover {

    padding-right: 25px;

    font-family: Tahoma, Geneva, sans-serif;

    font-weight: 11px;

    text-decoration: none;

    color: #a7a7a7;

    }

    ul li.active a:link,

    ul li.active a:visited {

    padding-right: 25px;

    font-family: Tahoma, Geneva, sans-serif;

    font-weight: 11px;

    text-decoration: none;

    color: #cc0000;

    }

    /* ==== END NAVIGATION ==== */

    body {

    background: url(images/background-gradient.jpg) repeat-x #2e2e2e;

    }

    /* ==== HEADER ==== */

    #top-black-bar {

    width: 100%;

    height: 35px;

    background: black;

    }

    #nic-logo {

    position: relative;

    top: 100px;

    right: 50px;

    float: right;

    }

    #logo {

    width: 187px;

    height: 108px;

    background:url(images/logo.jpg) white;

    outline: 1px solid black;

    position: relative;

    top: 110px;

    margin: auto;

    right: 367px;

    }

    #center-h2 {

    height: 25px;

    width: 520px;

    margin: auto;

    }

    #center-bar {

    margin-top: 40px;

    width: 100%;

    height: 35px;

    background: url(images/center-bar.jpg) repeat-x #fff;

    }

    /* ==== END HEADER ==== */

    /* ==== MAIN CONTENT AREA */

    #container {

    margin: auto;

    margin-top: 40px;

    width: 920px;

    }

    #main {

    width: 920px;

    min-height: 650px;

    background: url(images/van-background.jpg) no-repeat bottom white;

    float: left;

    margin-top: 20px;

    margin-bottom: 40px;

    }

    /* —- Home Page Styles —- */

    #main .contentpaneopen .contentheading {

    padding-top: 50px;

    padding-left: 40px;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 20px;

    }

    #left-column {

    float: left;

    width: 40%;

    padding: 4%;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 13px;

    line-height: 150%;

    }

    #right-column {

    float: right;

    width: 40%;

    padding: 4%;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 13px;

    line-height: 150%;

    }

    #right-column ul {

    list-style: circle;

    }

    #right-column li {

    float: left;

    clear: left;

    }

    /* ==== END MAIN CONTENT AREA ==== */

    /* ==== FOOTER ====*/

    html, body, #wrap2 {height: 100%;}

    body > #wrap2 {height: auto; min-height: 100%;}

    #main2 {padding-bottom: 35px;} /* must be same height as the footer */

    #footer {position: relative;

    margin-top: -35px; /* negative value of footer height */

    background: url(images/center-bar.jpg) repeat-x;

    height: 35px;

    clear:both;}

    /* ==== END FOOTER ==== */

    # March 3, 2010 at 5:05 pm

    #right-column li {

    float: left;

    clear: left;

    }

    Change above CSS to this -

    #right-column li {left:0; clear:left;}

    Good luck,

    Chris

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".