My question is, why is the headline text not showing under the thumbnails in IE (8 and earlier). Works fine in all other browsers.
HTML:
<div id="thumbsGrid">
<div class= "thumbs">
<a href="http://youtu.be/A30XhK8Vtmg">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png"id="1.thumb"/>
</a>
<h4><a href="http://youtu.be/A30XhK8Vtmg">Ben</a></h4>
</div>
<div class= "thumbs">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png" id="2.thumb"/>
<h4><a href="/NCPIE/resonator.html"> The Resonator</a></h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/re.html">
<img src="images/thumbs/door2/friendsThumbs.png"id="3.thumb"/>
</a>
<h4><a href="/NCPIE/re.html">RE-Covery</a></h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/divedeeper2.html">
<img src="images/thumbs/door2/divedeeper2Thumb.png"id="5.thumb"/>
</a>
<h4><a href="/NCPIE/divedeeper2.html"> Dive Deeper </a></h4>
</div>
<!--thumbsGrid close-->
</div>
CSS:
.thumbs {
float:left;
width:100px;
height:100px;
margin-right:12px;
margin-bottom:0;
border:0;
padding:0;
}
#thumbsGrid {
float:left;
width:500px;
min-height:216px;
margin-left:110px;
border:0;
padding-right:40px;
background: black;
}
.thumbs h4 a {
color: #FFF;
}
And here it is live: http://www.jillmedinger.com/NCPIE/door2.html
It has to do with the
filteron the.thumbs. The easiest resolution is to setposition: relativeto theh4as this fiddle shows.