Newbie - ie7 and jquery .animate() - sliding captions

Question

I'm trying to make some sliding captions, something like Mosaic, but lighter. Everything looks good in all major browsers (even if it looks slow in ie8), but nothing happens in ie7. I'm testing with ieTester, and I have no idea if the bug comes from the software or from my code. I'm sure you'll have some tips to help me improve it!

Thanks anyway.

HTML:

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <div class="details">
 <h6>Lorem ipsum</h6>
 <p>Lorem ipsum dolor sit amet,…</p>
 </div>
 </a>
</div>

CSS:

.imgbox{
 width: 204px;
 height: 154px;
 position: relative;
 overflow: hidden;
 float: left;
 margin: 10px;
 border:1px solid #999;
 -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}

.imgbox img{
 width: 200px;
 height: 150px;
 padding: 2px;
 overflow: hidden;}


.caption{
 display:block;
 position:absolute;
 top:104px;
 height:100%;
 width:100%;

 background: rgb(0,0,0);
 background: rgba(0,0,0,0.6);  
 background: transparent\9;
 zoom: 1;
 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}

JS:

$(".imgbox").hover(
    function() 
    {$(this).children('.caption').animate({top:0},"fast");},
    function() 
    {$(this).children('.caption').animate({top:104},"fast");}
 );

Answer 1

I found that it came from the position of the caption. I set a top position but didn't define any left or right position. With that piece of code it now appears on ie7:

.caption{
 display:block;
 position:absolute;
 top:104px;
 left:0;
 height:100%;
 width:100%;

But it's still very slow on ie8 and ie7. Anyway, problem solved!

Answer 2

Your HTML code is invalid. The a element is an inline element, and it can't contain block elements like div. Browsers have different ways of dealing with incorrect markup, and might rearrange or ignore certain tags to create elements that are valid.

Put inline elements inside the link so that they are parsed correctly, then you can use CSS to turn them into block elements:

<div class="imgbox">
 <img src="#" />
 <a href="#" class="caption">
 <spap class="details">
 <span class="h6">Lorem ipsum</span>
 <span class="p">Lorem ipsum dolor sit amet,…</span>
 </span>
 </a>
</div>

CSS:

.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }

There are also some hacks in the CSS code that might not all go down well with IE7. You can comment out some of them to test if they cause problems.