I am working on a templste design and can't figure out why it shows up fine in FF, but is missing parts in IE. Both Divs missing in IE are absolutely positioned. Should I not do this?

CSS
CODE

/* CSS Document */


/****** GLOBAL STYLES ******/

body {
padding:10px 20px;

background-image:url(images/bodyimage.png)
}

h1 {
}

h2{
font-family:"Century Gothic", Century;
font-size:12px;}



/****** Main Page Styles ******/

#page {
width:910px;
height:1100px;
padding:5px;
}

#container {
width:900px;
height:1100px;
padding:20px;
margin-bottom:10px;
background:url(images/containerbackground.png);
background-repeat:no-repeat;
}

#header {
width:880px;
height:120px;
}



/* Leftbar Styles */

#leftbar{
position:absolute;
width:160px;
height:1000px;
left:57px;
margin-top:10px;
border:thin 2px #000000;
background:url(images/Barbackground.png);
}


/* End Leftbar Styles */

/**** Content Styles ****/

#content {
position:absolute;
width:540px;
height:1000px;
margin-left:185px;
margin-top:10px;
background-image:url(images/contentbackground.png);
background-repeat:no-repeat;
}


#top {
width:450px;
height:460px;
margin-top:20px;
margin-left:39px;
background-color:#FFFFFF;
border:thin 2px #FF0000;
}

#bottom {
width:450px;
height:460px;
margin-left:39px;
margin-top:16px;
background-color:#6999c9;
border:thin 1px #FF0000;
}

/* Bottom Styles */

#productline {
width:460px;
}

#product1 {
width:95px
}

#product2 {
width:95px
}

#product3 {
width:95px
}

#product4 {
width:95px
}


/* End Bottom Styles */

/* Rightbar Styles */

#rightbar {
float:right;
width:160px;
height:1000px;
margin-top:10px;
background:url(images/Barbackground.png);
}

/* End Rightbar Styles */

/****** End CONTENT STYLES ******/


/****** FOOTER STYLES ******/

#footer {
clear:right;
width:900px;
height:40px;
margin-top:0;
padding-top:10px;
background:#3413EC;
}


html
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site2</title>
<link href="Site2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">

<div id="header">
</div>

<div id="container">


<div id="leftbar"> </div>


<div id="content">
<div id="top"></div>
<div id="bottom"></div>
</div>

<div id="rightbar"> </div>

<div id="footer">
</div>

</div>

</div>

</body>
</html>

I was floating the leftbar, but it did not show up right in FF, now that I've changed it, it doen't work in IE. Thanx for the help!