Here's the code I'm using for a sliding caption effect on my gallery site:
I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible).
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'185px'},{queue:false,duration:160});
}, function() {
// ending position of the caption... measured from top.
$(".cover", this).stop().animate({top:'228px'},{queue:false,duration:160});
});
Currently, I'm trying to add Shadow box for a full view of each image:
However, when I include the doctype declaration in my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The sliding captions are not behaving as expected in IE. They initially appear at the top of the caption box and then move to their correct position only after hovering over them. The starting position defined in the CSS:
.caption .boxcaption {
/* Starting position of the caption box. Measured from the top of the image box */
top: 228;
left: 0;
}
This doesn't seem to work properly with the doctype declaration. Removing the doctype makes the sliding captions work correctly, but other lightbox popups like shadowbox require it to function properly...
This issue seems to be specific to IE, as everything works fine in FF and Chrome.
Any ideas or suggestions on how to resolve this?