Scroll Bar Missing In Browser - html

Question

I'm using the following codes (HTML and CSS) and by using the code you are unable to scroll up or down the page via mouse scroll or within the browser (Scroll bar on the right is not there)
HTML:
<div id="head">
<div id="logo">
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
Searh
<li>
<li>
FAQ
</li>
<li>
Links
</li>
<li>
Legal
</li>
</ul>
</div>
CSS:
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
color: #FFFFFF;
display: block;
height: 40px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
float:left;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:60px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:20px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}
If you are able to help could you please use Code examples on how to fix it please :)
EDIT: Example / Code Editor = http://jsfiddle.net/BctHr/

Answer 1

Check your css:
overflow:hidden; /* get rid of scroll bars in IE */
for html, and for body
remove that line, or change to : overflow:scroll;
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

Overflow in the body should be auto or scroll.

Answer 3

and also because you have no content div