Question

Live site.

The <li> items in the far right Twitter feed have excess spacing between them and I can’t figure out why- there aren’t any weird padding or margin issues that I can find.

The site is WordPress, but here is the rendered HTML:

<li>
    <h2><a href="#">Recent Tweets</a></h2>
    <div id="twitter-feed">

        <ul>
                                                        <li>
            RT @LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership</li>
                                                        <li>
            What you do in small doses becomes big doses in your life.</li>
                                                        <li>
            RT @ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9</li>
                                                        </ul>
    </div><!-- end twitter-feed -->
    <div class="forward-link">
        <p><a href="https://twitter.com/growing_edge"><span style="color:#b8bf33">Follow @Growing_Edge</span></a></p>
    </div><!-- end forward-link -->
</li>

And the CSS

#landing-brief #twitter-feed {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 75%;
    line-height: 1.5;
    color: #333333;
    margin-left: -28px;
}

#landing-brief #twitter-feed ul li {
    padding-bottom: 5px;
    height: 200px;
}

#landing-brief .forward-link {
    position: absolute;
    left: 0; 
    bottom: 0;
}

Any ideas as to what’s causing this?

Answer 1

There are two lines that are the culprits here. Both of these specify an explicit height of 200px. I’m guessing it comes from the template you are using.

/* On line 2836 in style.css */
#landing-brief #twitter-feed ul li {
    height: 200px;
    padding-bottom: 5px;
}
/* On line 2814 in style.css */
#landing-brief ul li {
    display: inline-block;
    height: 200px;
    padding-bottom: 20px;
    padding-right: 20px;
    position: relative;
    vertical-align: top;
    width: 250px;
}

To fix it, you need to override the explicit height of the li blocks to auto !important;, or remove the height of the li altogether.

How I came to this conclusion:
I used Firefox with FireBug and inspected the individual Twitter post. After disabling the 200px height on both of the style blocks, it looked correct.

Please let me know if this works 🙂