remove extra margin and padding from floating div - html

Question

Issue : For the below mentioned code, ie7 is rendering extra vertical padding in between the two rows of divs with images ,i have tried a lot of ways to work it out.. but clueless. I really need your help on this.
The code works fine in the standard compliant browsers
HTML Code:
<div id="screensaver_items">
<div class="header clearfix">
<div id="header_left">
<h3>screensavers</h3>
</div>
<div id="header_right">
<h3>see all<span>></span></h3>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content no_pad">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content">
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
<div class="content no_pad" >
<img src="images/dark_night.jpg">
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
social_icon
social_icon
</div>
</div>
</div>
CSS :
*{margin: 0;padding: 0;}
body {
font-family: 'Conv_Aller_Rg',Arial,verdana,sans-serif;
font-size:11px;color:#333;line-height: 2em; margin: 0;padding: 0;
}
a,img{
border: none;
}
#screensaver_items {
margin: 0;
padding: 0;
width: 756px;
}
#screensaver_items .content {
float: left;
padding-right: 10px;
padding-bottom: 10px;
}
#screensaver_items .header{
position: relative;
}
#screensaver_items .last {
padding-right: 0;
}
#screensaver_items #header_left h3{
text-transform: uppercase;
color: #e10000;
font-size: 18px;
font-family: 'Conv_Aller_Bd',Arial,verdana,sans-serif;
font-weight: normal;
margin-bottom:10px;
}
#screensaver_items #header_right{
position: absolute;
right: 19px;
top: 6px;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#screensaver_items #header_right h3{
text-transform: uppercase;
color: #e10000;
font-size: 12px;
font-family: 'Conv_Aller_Bd',Arial,verdana,sans-serif;
font-weight: bold;
*margin-bottom:0px !important;
*margin-top: 0px !important;
}
#screensaver_items #header_right h3 a{
text-decoration:none;
color:#e10000;
font-weight: normal;
}
#screensaver_items #header_right h3 a span{
background: url("../images/arrow-icon-small.png") no-repeat scroll 0 0 transparent;
padding-left: 10px;
position: absolute;
right: -27px;
text-indent: -9999px;
top: 4px;
width: 8px;
}
#screensaver_items #header_right h3 a:hover{
text-decoration: underline;
}
#screensaver_items .content:hover img{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:181px;
height:137px;
*width:177px !important;
*height:133px !important;
border:2px solid #e10000;
}
#screensaver_items .content .caption p{
text-transform: uppercase;
}
#screensaver_items div.no_pad{
padding-right: 0px !important;
}
.caption {
position: relative;
margin: 0;
padding: 0;
}
#screensaver_items content .shade{
display:none;
}
#screensaver_items .caption p{
display: none;
}
#screensaver_items .caption span {
display: none;
}
#screensaver_items .content:hover .shade{
background-color: #333;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
width: 177px;
*width: 177px !important;
height:36px;
position: absolute;
top: -37px;
*top: -40px !important;
left: 2px;
*left:2px !important;
display:block;
}

Answer 1

Get rid of this:
#screensaver_items .content:hover .shade{
background-color: #333;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
width: 177px;
*width: 177px !important;
height:36px;
position: absolute;
top: -37px;
*top: -40px !important;
left: 2px;
*left:2px !important;
display:block;
}
and it should work fine.