jQuery Sliding Image Caption Help?

JavaScript
1

I’m having some trouble figuring this out. I’m working on a way to have an image frame for a website that is scalable in size, provides a PNG drop shadow on the divs, and has an animated sliding image caption coming out from the bottom of the image.

The trick is that the client wants there to be shadows on both the image box, and the caption box that slides out as well. But I’m having trouble getting the caption box to overlay the image box without stretching the div so the image shadow goes past the caption box. Is this making sense?

Here’s my code so far. Note that this is severely broken at the moment.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="" />
	
	<!-- javascript -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="scripts.js"></script>
		
	<!-- style sheets -->
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">

	<title>Girl Scouts Picture Frame</title>
	
	<style>	
	body { background:#eee; }
	
	#frame-wrap { margin:20px auto; padding:20px; background:#fff; overflow:visible; }
	
	.innerbox img { margin:0; padding:0; border:0; }
			
	.dropshadow{
		float:left;
		clear:left;
		background: url(shadowAlpha.png) no-repeat bottom right !important;
		background: url(shadow.gif) no-repeat bottom right;
		margin: 10px 0 10px 10px !important;
		margin: 10px 0 10px 5px;
		padding: 0px;
	}
	.innerbox{
		position:relative;
		bottom:6px;
		right: 6px;
		padding:0;
		margin:0;
		overflow:visible;
	}
	.inner1 { background:#aaa; }
	.innerbox{
		/* IE5 hack */
		\\margin: 0px 0px -3px 0px;
		ma\\rgin:  0px 0px 0px 0px;
	}
	.innerbox #bottom { background:#aaa; height:30px; margin:0; }
	#bottom hr { border-color:#888; border-width:1px; margin:25px 0 0 0; padding:0; }
	
	#caption { border-top:2px solid #888; overflow:hidden; }
		#caption .innerbox { padding:15px; }
		#caption p { margin:0; }
	</style>
	
	<script type="text/javascript">
	$(document).ready(function() { 

		var capwidth = $('.inner1 img').width();

		$('#caption').width(capwidth*0.9);
		$('#imageframe').width(capwidth);
		$('#imageframe #bottom').css('paddingLeft', capwidth*0.05).css('paddingRight', capwidth*0.05);
	
	});
	</script>

</head>
<body>

<div id="frame-wrap">
		
		<div class="dropshadow" id="imageframe">
			<div class="innerbox inner1">
				
				<img src="image.jpg" border="none" width="800" alt="image">
				
				<div id="bottom">

					<hr>

					<div class="dropshadow" id="caption">
						<div class="innerbox">
							
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
											
						</div><!--innerbox-->
					</div><!--caption-->
				
				</div><!--bottom-->
				
			</div><!--inner1-->
		</div><!--imageframe-->	
		
</div><!--frame-wrap-->

</body>
</html>