Blank whitespace only in firefox - css

Question

firefox:
chrome:
does anyone know why this is happening in Firefox? it's driving me nuts
here is the css:
#gallery_grid .gallery_grid_item,#related_topics .gallery_grid_item,#popular_galleries .gallery_grid_item {
position:relative;
overflow:hidden;
display:block;
text-decoration:none;
}
#gallery_grid .gallery_grid_item {
width:288px;
height:260px;
box-shadow:0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);
transition:margin .1s;
-moz-transition:margin .1s;
-webkit-transition:margin .1s;
-o-transition:margin .1s;
margin:15px;
}
#gallery_grid .gallery_grid_item:hover {
margin:13px 15px 17px;
}
#gallery_grid .gallery_grid_image_wrapper {
width:100%;
height:190px;
overflow:hidden;
}
#gallery_grid .gallery_grid_image {
min-height:100%;
}
#popular_galleries .gallery_grid_item,#gallery_grid .gallery_grid_item {
border:1px solid #999;
}
#related_topics .gallery_grid_item {
border:0!important;
width:242px;
height:140px;
overflow:hidden;
background:#181818;
margin:0;
}
#popular_galleries .gallery_grid_item {
width:200px;
height:140px;
letter-spacing:-.05em;
background:#181818;
margin:0 0 15px;
}
#popular_galleries.upsell .gallery_grid_item {
height:200px;
}
#related_topics .gallery_grid_item:nth-child(even) {
border:1px solid #777!important;
border-width:0 1px;
}
#gallery_grid .gallery_grid_item:hover,#related_topics .gallery_grid_item:hover,#popular_galleries .gallery_grid_item:hover {
border:1px solid #86d3ff;
}
#gallery_grid .gallery_grid_image,#related_topics .gallery_grid_image,#popular_galleries .gallery_grid_image,#related_topics .gallery_list_image {
width:100%;
overflow:hidden;
opacity:.9;
filter:alpha(opacity=90);
transition:opacity .1s;
-moz-transition:opacity .1s;
-webkit-transition:opacity .1s;
-o-transition:opacity .1s;
text-align:center;
display:block;
margin:0 auto;
}
#gallery_grid .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_grid_item:hover .gallery_grid_image,#popular_galleries .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_list_item:hover .gallery_list_image {
opacity:1;
filter:alpha(opacity=100);
}
#popular_galleries .gallery_grid_info,#related_topics .gallery_grid_info {
width:100%;
position:absolute;
bottom:0;
font-weight:500;
}
#gallery_grid .gallery_grid_info {
height:62px;
}
#related_topics .gallery_grid_info {
height:54px;
}
#popular_galleries .gallery_grid_info {
height:58px;
}
#related_topics.grid .gallery_title,#popular_galleries .gallery_title {
color:#fff;
text-shadow:1px 0 1px #000;
font-size:15px;
line-height:18px;
}
#gallery_grid .gallery_title {
font-size:16px;
line-height:21px;
color:#000;
text-shadow:none;
font-weight:600;
border-top:2px solid #00a3ff;
padding:10px 15px 0;
}
#gallery_grid .gallery_title:hover {
text-decoration:underline;
}
#popular_galleries .gallery_title {
height:39px;
overflow:hidden;
}
.trans_bg {
width:100%;
height:100%;
background:#000;
opacity:.5;
filter:alpha(opacity=50);
}
.content_over_transparent {
position:absolute;
top:0;
width:100%;
height:100%;
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#gallery_grid .content_over_transparent,#related_topics .content_over_transparent {
padding:10px 15px 0;
}
#popular_galleries .content_over_transparent {
padding:10px 10px 0;
}
It's "content_over_transparent". Appreciate any help, thanks!
Edit:
Here is the grid item HTML (adding more content as it saying it's mostly code):
<a class="gallery_grid_item" href="#">
<img class="gallery_grid_image" src="http://d1qfo1bk8s78mq.cloudfront.net/uimg/5f9aa039ecf554f73312d912e22c516e.x355" />
<div class="gallery_grid_info">
<div class="trans_bg"></div>
<div class="content_over_transparent">
<p class="gallery_title">Finding your Perfect Red</p>
</div>
</div>
</a>

Answer 1

Add overflow: hidden; in .content_over_transparent, and it displays well both on FF and Chrome :
.content_over_transparent {
position:absolute;
top:0;
width:100%;
height:100%;
overflow:auto; /* Delete that */
box-sizing:border-box;
-moz-box-sizing:border-box;
overflow: hidden; /* Add that */
}
By the way, in your question you forgot to wrap your HTML code in a #popular_galleries.
Here's the fiddle : Fiddle