# IE content goes below the scrollbar

**URL:** https://forum.kirupa.com/t/ie-content-goes-below-the-scrollbar/275237
**Category:** web dev
**Created:** [November 11, 2008, 4:28pm UTC](https://forum.kirupa.com/t/ie-content-goes-below-the-scrollbar/275237 "2008-11-11T16:28:09Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Sirisian](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@Sirisian](https://forum.kirupa.com/u/Sirisian)
#### Post date: [November 11, 2008, 4:28pm UTC](https://forum.kirupa.com/t/ie-content-goes-below-the-scrollbar/275237/1 "2008-11-11T16:28:09Z")

</div>

I made a quick demo of what I mean [here](http://www.webdevout.net/test?0S)  
   
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?

```auto
<!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>

```
