CSS Creator 100% Div works on FF but not on IE

Posted: Mon, 2008-09-08 11:32

so my website has a main div on the middle that should stretch to the bottom of the page.
I managed to do it so that firefox will display that, but IE wont

here are the codes

CSS

@charset "utf-8";

html,body
{
padding-top:50px;
margin:0;
padding:0;
padding-top: 24px; 
background-color: #5F2929;
background-image:url(bg.jpg);
background-repeat: repeat-x;
font-family: "Times New Roman", Times, serif;
font-size:14px;
height:100%;
width:100%;
text-align: center;
}

a:link
{
color:#990000;
text-decoration:underline;
}

a:visited
{
color:#603939;
text-decoration:underline;
}

a:hover
{
color:#B01313;
text-decoration:underline;
}

a:action
{
color:#C55729;
text-decoration:underline;
}


.warper {
width: 856px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
display: table; /*** For non-IE browsers ***/
height: 100%;
}

.main
{
background-color: #58677C;
width: 856px;
position: relative;
display: table; /*** For non-IE browsers ***/
height: 100%;
padding: 0;
}

.clear {
	clear: both;
}

.corner
{
background-image: url(upperborder.png);
width: 856px;
height: 138px;
margin-left:auto;
margin-right:auto;
margin-bottom: 0;
padding-bottom:0;
}

.menu
{
width:100%;
height: 53px;
margin-left:auto;
margin-right:auto;
padding:0;
margin-top:0;
}

.bar
{
text-align:center;
list-style-type:none;
font-size:18px;
font-weight:bold;
width:100%;
height: 53px;
margin-left:auto;
margin-right:auto;
padding:0;
margin-top:0;
}

.item
{
list-style-type:none;
text-align: center;
vertical-align:middle;
float:right;
width: 114px;
height:36px;
background-image: url(menbg.png);
padding-bottom: 16px;
}

.item a:link
{
color:#FFFFFF;
text-decoration:none;
display:block;
padding-bottom: 16px;
padding-top: 16px;

}

.item a:visited
{
color:#FFFFFF;
text-decoration:none;
display:block;
padding-bottom: 16px;
padding-top: 16px;
}

.item a:hover
{
color:#FFFFFF;
text-decoration:underline;
background-image: url(menbgh.png);
display: block;
padding-bottom: 16px;
padding-top: 16px;
}

.menleft
{
background-image: url(menleft.jpg);
width:30px;
height:53px;
margin-left: -30px;
float:left;
}

.menright
{
background-image: url(menright.jpg);
width:22px;
height:53px;
margin-right: -22px;
float:right;
}

#left
{
background-image:url(men.png);
background-position:left top;
margin-left:-45px;
padding-bottom: 16px;
}

#right
{
background-image:url(men.png);
background-position:right top;
margin-right:-22px;

}

#right a:hover
{
background-image:url(menh.png);
background-position:right top;
}

#left a:hover
{
background-image:url(menh.png);
background-position:left top;
}

.cell1
{
padding-top:5px;
background-image:url(cell1.jpg);
width:633px;
height:295px;
margin-top: 30px;
margin-left:102px;
}

.cell2
{
background-image:url(cell2.jpg);
width:501px;
height:192px;
margin-top: 0;
margin-left:-79px;;
padding-right: 15px;
padding-top: 13px;
}

.cell3
{
background-image:url(cell3.jpg);
width:281px;
height:247px;
margin-top: -28px;
float:right;
margin-right:120px;
position:relative;
z-index:3;
padding-right: 15px;
padding-top:10px;
}

.cell4
{
background-image:url(cell4.jpg);
width:317px;
height:211px;
margin-top: -1px;
margin-left:104px;;
float:left;
padding-top: 20px;
padding-right: 15px;
}

.cell5
{
background-image:url(cell5.jpg);
width:504px;
height:215px;
float:right;
margin-right:-101px;
margin-top: 0;
padding-top: 35px;
padding-right: 15px;
}

HTML

<!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=utf-8" />
<title>Untitled Document</title>
<link href="pixellia.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="warper">
<div class="corner"> </div>
<div class="main">

<div class="menu">
<ul class="bar">
<li class="item" id="right"><a href="index.html">  </a></li>
<li class="item"><a href="build.htm"> </a></li>
<li class="item"><a href="design.htm"> </a></li>
<li class="item"><a href="example.htm"> </a></li>
<li class="item"><a href="protfolio.htm"> </a></li>
<li class="item"><a href="about.htm"> </a></li>
<li class="item"><a href="order.htm"> </a></li>
<li class="item" id="left"><a href="contact.html"> </a></li>
</ul>
 </div>
 
 <div class="cell1"> </div>
<div class="cell3">  </div>
<div class="cell2"> </div>
<div class="cell4"> </div>
<div class="cell5"></div>
<div class="clear"></div>
</div>
</body>
</html>

what do I need to do so that Explorer will strech the div aswell

100% Div works on FF but not on IE

I have the same problem. One