IE content goes below the scrollbar

programming web dev
1

I made a quick demo of what I mean here

In FF the content is squished so that the scrollbar can be in the div. In IE the content in this example is under the div.

Any idea how to fix this?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
<style type="text/css">
                ul {list-style:none;}
		* { margin: 0; padding: 0; }
		.clearboth { clear:both; }
                #joblist
		{
			list-style:none;
		}
		#numberofjobs
		{
			width:100%;
			height:20px;
			line-height:20px;
			background-color:#734A12;
			margin-bottom:2px;
			text-align:center;
			vertical-align: bottom;
		}
		#numberofjobs h4
		{
			color:#FFFFFF;
		}
		#printerheader
		{
			width:100%;
			height: 20px;
			line-height:20px;
			background-color:#734A12;
			margin-bottom: 2px;
			vertical-align: bottom;
		}
		#printerheader h4
		{
			float:left;
			color:#FFFFFF;
			margin-left: 10px;
		}
		#printerheader a
		{
			float:right;
			color:#FFFFFF;
			margin-right:10px;
			text-decoration:none;
		}
		#printerheader a:hover
		{
			color:#EEEEEE;
			text-decoration:underline;
		}
		#print
		{
			width:100%;
			height:20px;
			line-height: 20px;
			vertical-align: bottom;
			clear:both;
		}
		#print:hover
		{
			background-color:#bab0a0 !important;
		}
		#printold
		{
			width:100%;
			height:20px;
			line-height: 20px;
			vertical-align: bottom;
			clear:both;
		}
		#printold:hover
		{
			background-color:#fe5c5c !important;
		}
		#printtext
		{
			float:left;
			color:#FFFFFF;
			width:100px;
			margin-left: 20px;
		}
		#size
		{
			float:left;
			width:100px;
			color:#FFFFFF;
		}
		#lifetime
		{
			float:left;
			width:100px;
			color:#FFFFFF;
		}
		#move
		{
			float:right;
			text-align:right;
			margin-right:10px;
			color:#FFFFFF;
			text-decoration:none;
		}
		#move:hover
		{
			color:#EEEEEE;
			text-decoration:underline;
		}
		#remove
		{
			float:right;
			text-align:right;
			margin-right:10px;
			color:#FFFFFF;
			text-decoration:none;
		}
		#remove:hover
		{
			color:#EEEEEE;
			text-decoration:underline;
		}
     </style>
  </head>
  <body>
    <div style="overflow-x:hidden;overflow-y:scroll;width:500px;height:300px;background-color:#0000FF;">
      <ul id="joblist">
        <li id="numberofjobs"><h4>1 jobs pending.</h4></li>
        <li id="printerheader">
	  <h4>RowAUCC (1)</h4>
	  <a href='javascript:RemoveAllFromClass("RowAUCC");'>Wipe Queue</a>
	  <a href='javascript:MoveAllFromClass("RowAUCC");'>Move All</a>
        </li>
        <li id="print" style="background-color: rgb(148, 134, 111);">
	  <h4 id="printtext">n5ohare</h4>
          <h4 id="size">65.00 KiB</h4>
	  <h4 id="lifetime">4 seconds</h4>
	  <a href='javascript:Remove("1211420");' id="remove">Remove</a>
	  <a href='javascript:Move("1211420");' id="move">Move</a>
	</li>
      </ul>
    </div>
  </body>
</html>