Grow your CSS skills. Land your dream job.

BetterBlogroll issue …

  • # February 4, 2009 at 5:42 pm

    We discovered that blogroll.css is "interfering" with the "P" tags on our pages
    causing paragraphs to run together.

    Looks like the offending code is: { margin: 0; padding: 0; }

    If we remove the above, the paragraph spacing returns to normal, but
    of course BetterBlogroll then doesn’t display correctly.
    Ideas anyone?

    I’ve included the CSS file, below. Thanks.

    Code:
    /*
    A Better Blogroll
    by Chris Coyier

    http://css-tricks.com

    */

    /*
    GENERIC RESET & BASIC STRUCTURE
    */

    * { margin: 0; padding: 0; }
    body { font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px; }

    a { /* remove the dotted outlines when clicking tabs */
    outline: none; }

    ul { list-style: none; }

    /*
    WIDGET STRUCTURE
    */
    #blogSliderWrap { width: 320px; margin: 10px auto;
    background: url(http://www.site.com/images/widget-bottom-bg.jpg) 7px bottom no-repeat;
    padding-bottom: 30px; position: relative; }

    #blogSlider { margin-left: 15px; padding: 25px 18px 0px 18px; width: 263px;
    background: url(http://www.site.com/images/widget-middle-bg.jpg) center center repeat-y; }
    .stripViewer { position: relative; overflow: hidden; clear: both; }
    .stripViewer .panelContainer { position: relative; left: 0px; top: 0px; }
    .stripViewer .panelContainer .panel { float: left; position: relative; width: 280px; }
    .stripNav { margin-left: 22px; position: relative; top: 18px; z-index: 99;
    width: 285px; }
    .wrapper { padding: 10px; }
    .innerWrap { width: 273px; overflow: hidden; }
    #push { height: 30px; }

    /*
    MAIN TABBED NAVIGATION
    */
    .stripNav ul li { float: left; }

    .stripNav li a { /* Generic “CSS image replacement” */
    display: block; height: 18px; text-indent: -9999px; }
    /* The below class names are auto-generated by the JavaScript */
    .stripNav li.tab1 a { background: url(http://www.site.com/images/tab-forums.gif) top center no-repeat; width: 63px; }
    .stripNav li.tab2 a { background: url(http://www.site.com/images/tab-articles.gif) top center no-repeat; width: 63px; }
    .stripNav li.tab3 a { background: url(http://www.site.com/images/tab-topics.gif) top center no-repeat; width: 85px; }
    .stripNav li.tab4 a { background: url(http://www.site.com/images/tab-blog.gif) top center no-repeat; width: 73px; }

    .stripNav li a:hover,
    .stripNav li a:active,
    .stripNav li a:focus { /* Restore focus styling that we removed when we removed outlines */
    background-position: top center; }

    /* It is neccessary to repeat the image paths here */
    .stripNav li.tab1 a.current { background: url(http://www.site.com/images/tab-forums.gif) bottom center no-repeat; }
    .stripNav li.tab2 a.current { background: url(http://www.site.com/images/tab-articles.gif) bottom center no-repeat; }
    .stripNav li.tab3 a.current { background: url(http://www.site.com/images/tab-topics.gif) bottom center no-repeat; }
    .stripNav li.tab4 a.current { background: url(http://www.site.com/images/tab-blog.gif) bottom center no-repeat; }

    /*
    SUB NAVIGATION
    */
    .stripNavL a, .stripNavR a { display: block; position: absolute; width: 75px; height: 22px; text-indent: -9999px; }

    /*
    .stripNavL a { bottom: 35px; left: 45px; background: url(http://www.site.com/images/previous.png); }
    .stripNavR a { bottom: 35px; right: 45px; background: url(http://www.site.com/images/next.png);
    }
    */

    /*
    HEADLINES STYLING
    */
    .panel ul { width: 240px; }
    .panel ul li a { border-bottom: 1px solid #C1B599; color: #303030;
    display: block; padding: 7px 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px; text-decoration: none; }

    }
    .panel ul li:last-child a { /* Remove bottom border on last list item
    Hooray for pseudo selectors! */
    border: none; }
    /* Unique rollover colors for each list */
    .panel ul#psd-list li a:hover { background: #DBDBDB; color: white; }
    .panel ul#net-list li a:hover { background: #DBDBDB; color: white; }
    .panel ul#vector-list li a:hover { background: #DBDBDB; color: white; }
    .panel ul#audio-list li a:hover { background: #DBDBDB; color: white; }

    # February 5, 2009 at 7:30 pm

    bump please

    # February 5, 2009 at 7:45 pm

    Gonna need a live link or something more specific than "doesn’t display correctly" to troubleshoot anything.

    # February 6, 2009 at 12:05 pm

    Chris, thanks.

    Please see:

    http://www.growth trac.com/artman/publish/a-conversation-with-warren-barfield-1176.php

    Please note how the paragraphs run together.

    # February 6, 2009 at 12:34 pm
    Code:
    p {
    margin: 0 0 15px 0;
    }
    # February 6, 2009 at 3:21 pm

    Chris, thank you. That did it.

    BTW I love the script …great job.

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

You must be logged in to reply to this topic.

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