I am trying to create a scrollable DIV using the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<style type="text/css">
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
top:0;
}
</style>
<script type="text/javascript">
$(function(){
$(".container a.up").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal-10);
});
$(".container a.dn").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal+10);
});
});
</script>
</head>
<body>
<div class="container">
<p>
<a href="#" class="up">Up</a> /
<a href="#" class="dn">Down</a>
</p>
<div class="content">
<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>
<p>Hello World 4</p>
<p>Hello World 5</p>
<p>Hello World 6</p>
<p>Hello World 7</p>
<p>Hello World 8</p>
<p>Hello World 9</p>
<p>Hello World 10</p>
<p>Hello World 10</p>
<p>Hello World 11</p>
<p>Hello World 12</p>
<p>Hello World 13</p>
<p>Hello World 14</p>
<p>Hello World 15</p>
<p>Hello World 16</p>
<p>Hello World 17</p>
<p>Hello World 18</p>
<p>Hello World 19</p>
<p>Hello World 20</p>
<p>Hello World 21</p>
<p>Hello World 22</p>
<p>Hello World 23</p>
<p>Hello World 24</p>
<p>Hello World 25</p>
<p>Hello World 26</p>
<p>Hello World 27</p>
</div>
</div>
</body>
</html>
I don't know where I am messing up, but it simply refuses to work. Any suggestions?
EDIT: I have tried both overflow: auto and overflow: hidden