Layout Problem with IE6 [Archive]

ksduded

05-08-2008, 08:18 PM

I want my bottom div to show at the bottom of the page. Its working fine in FF and IE7, but IE6 places it right after the previous layer. I have placed it within a div which has a height 100% and then set the bottom:0; in the bottom layer with a height:140px; to place it right at the bottom of the page.

Does IE6 not recognize the bottom property.

@charset "utf-8";
#hdtv_background
{
background-attachment: fixed;
background-image: url(images/background_oasis_may.jpg);
background-repeat: no-repeat;
background-position: top center;
background-color: #000000;
}

input[type=text], textarea { background-color: #ffffff; }

html, body
{
margin:0;
padding:0;
height:100%;
}

html { overflow: -moz-scrollbars-vertical; }

#layout
{
position:relative;
margin: 0 auto;
border:solid 0px #000000;
border-bottom:0;
border-top:0;
width:762px;
min-height:100%;
display:block;
position: relative;
}

#listing
{
padding-left:30px;
float:left;
width:450px;
padding-bottom:200px;
padding-top:200px;
}

* html #listing
{
display:inline-block;
}

#container
{
padding-left:40px;
float:left;
width:682px;
padding-bottom:140px;
text-align:justify;
padding-top:200px;
}

#small-container
{
padding-left:40px;
float:left;
width:682px;
padding-bottom:160px;
text-align:justify;
padding-top:30px;
}

#tv-container
{
padding-left:40px;
float:left;
width:682px;
padding-bottom:140px;
text-align:justify;
padding-top:150px;
}

#phpcalendar
{
padding-left:5px;
padding-top:205px;
float:left;
width:250px;
padding-bottom:80px;
}

* html #phpcalendar
{
display:inline;
}

#statictopbar
{
font-family: Century Gothic;
font-size: 12px;
color: #999999;
height: 164px;
border:solid 0px #000000;
width:762px;
top:0;
left:50%;
margin-left:-380px;
display:block;
position: fixed;
}

* html #statictopbar
{
position:absolute;
}

img { behavior: url(iepngfix.htc); }

#bottom_box
{
font-family: Century Gothic;
font-size: 12px;
color: #999999;
background-color: #000000;
height: 60px;
border:solid 2px #000000;
width:762px;
position: relative;
margin: 0 auto;
float:left;
}

#bottom
{
font-family: Century Gothic;
font-size: 12px;
color: #999999;
height: 140px;
border:solid 0px #000000;
width:760px;
position:absolute;
bottom:0;
left:1px;
}

* html #bottom
{
float:left;
display:inline;
}

.bottomlinks
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #898989;
text-decoration:none;
}

.bottomlinks:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #d0f57d;
}

.bottomtext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #898989;
}

.links
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #57bc8e;
text-decoration: none;
}

.links:hover
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;

}

.normaltext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
text-decoration: none;
line-height: 16px;
}

h1
{
font-family: Arial;
font-size: 24px;
text-decoration: none;
line-height: 24px;
color: #d0f57d;
font-weight:normal;
}

h2
{
font-family: Arial;
font-size: 16px;
text-decoration: none;
line-height:normal;
color: #d0f57d;
font-weight:bold;
}

the 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>

<link href="hdtv_menu2.css" rel="stylesheet" title="hey there" type="text/css" />
<title>Oasis HD - About Us</title>
</head>

<body id="hdtv_background">
<div id="layout">
<div id="statictopbar">
<?php
include 'statictopbar.php';
?></div>
<div id="container" class="normaltext"><br /><br />
<h1>About Us</h1>
<br />
<p>Who we are</p>
</div>

<div style="clear:both"></div>
<div id="bottom">
<?php
include 'bottom.php';
?>
</div></div>
</body>
</html>