<li> items have excess vertical spacing - css

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>Recent Tweets</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><span style="color:#b8bf33">Follow #Growing_Edge</span></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 :-)

Answer 2

#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 200px; <--- here is your problem.
}
Using an element inspector allows you to see where the defined styles of an element come from. and can help you spot problems like this quickly.

Answer 3

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

Answer 4

The height:200px on #landing-brief #twitter-feed ul li is causing this. Make it something smaller or make it auto by removing the height completely.
Not sure if you are aware of this, but using the developer console to debug HTML/JS/CSS in Safari/Chrome is very useful, as you can change fields in real time and see how the browser will render them.

Answer 5

The height of the li's are height:200px, change to height:auto;

Answer 6

I'd say it's the height you gave to '#landing-brief #twitter-feed ul li'. Try this:
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: auto;
}