Problem : The code mentioned below is causing extra vertical padding in IE7 between the two rows of divs with images. I've exhausted numerous attempts to fix it without success. Your assistance on this matter would be greatly appreciated. The code functions correctly in 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><a href="#">see all<span>></span></a></h3>
</div>
</div>
<div class="content">
<a href="#"><img src="images/dark_night.jpg"></a>
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
<a href="#" class="share">social_icon</a>
<a href="#" class="message">social_icon</a>
</div>
</div>
</div>
<div class="content no_pad">
<a href="#"><img src="images/dark_night.jpg"></a>
<div class="caption">
<div class="shade">
</div>
<p>thor</p>
<div class="social_links">
<a href="#" class="share">social_icon</a>
<a href="#" class="message">social_icon</a>
</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;
}
.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 .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;
}