Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Footer text appearing below viewable area in Internet Explorer 6


nigelt74 - 8:35 am on Nov 13, 2009 (gmt 0)


When the page is smaller than the viewable area you can see the footer which is good

However

When the page is longer than the viewable area and you need to scroll down the page I scroll as far down as I can but I can't see the footer or else I can just see the very tips of the top of the footer text, it's below the viewable area and I can't figure out how to stop this happening, the code below is the page and css, if you are testing it you will need to add enough text where it says LOTS OF TEXT to make the page scroll then the proble should Occur this only effects Internet Explorer 6

#container
{
margin: 0px auto 10px auto;
width: 1000px;
padding: 0px;
}
#intro-text
{
Float: left;
left: 5px;
padding: 0px;
width: 460px;
}
#intro-slide
{
margin-left: 480px;
width: 510px;
padding: 0px;
margin-right: 5px;
}
#intro-header
{
height: 100px;
color: #fff;
}
body {
background: #000;
background-image:url('orange.gif');
background-repeat:repeat-x;
color: #fff;
font-size: 16px;
line-height: 22px;
padding: 0;
margin: 0 auto;
font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
}
em {
color: orange;
}
p {
color: #fff;
font-size: 16px;
line-height: 22px;
}
.largehead {
font-size: 44px;
line-height: 38px;
}
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
font-size: 18px;
position: relative;
text-align: center;
width: 100%;
}
.head-para {
padding: 5px 0px;
}
.footer {
font-size: 10px;
color: orange;
line-height: 12px;
position: relative;
/*position: fixed;*/
bottom: 0;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Jim Jams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flashdetect.js"></script>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="the2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="intro-header">
<p class="head-para">&nbsp;
<div class="largehead">Jim Jams</div><!-- large head -->
<div class="line"><span class="left">Commercial Jammer</span><span class="right"><a href="contact.php">Contact</a></span></div>
</p>
</div><!-- intro header -->
<div style="clear:both;"></div>
<div id="intro-text">
<p>LOTS OF TEXT</p>
</div><!-- intro-text -->
<div id="intro-slide">
<p>&nbsp;</p>
<p>&nbsp;<img src="images/14.jpg"> </p>
</div><!-- intro slide -->
<div style="clear:both;"></div>
<div class="footer">
<span class="left">
<div class="vcard">
<span class="fn">Jim</span>
<div class="org">Jim Jams</div>
<div class="adr">
<span class="locality">Invercargill</span>
</div>
<div class="tel">03 123 4567</div>
</div>
</span>
<span class="right"><a href="privacy.html" target="_blank">privacy</a></span>
</div>
<!-- footer -->
</div><!-- container -->
</body>
</html>

Any help would be great


Thread source:: http://www.webmasterworld.com/css/4024275.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com