homepage Welcome to WebmasterWorld Guest from 54.166.111.111
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Footer text appearing below viewable area in Internet Explorer 6
It appears to work in every other browser, but IE6
nigelt74




msg:4024277
 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

 

nigelt74




msg:4026034
 7:55 pm on Nov 16, 2009 (gmt 0)

Any ideas as I still can't figure it out

swa66




msg:4026197
 1:20 am on Nov 17, 2009 (gmt 0)

First: validate your code. E.g. you cannot put a <div> inside a <span>

The problem is figuring out where the browser would close the elements on its own with the invalid code.

But if you suppose there are no children in the spans in your footer then the footer has no height and no children that are in the flow, so no reason to have a height. Yet the absolutely positioned elements will use the collapsed element for their positioning and cold very well end up underneath it all. A lot is browser dependent.

Easiest to figure out what goes where is to set different background colors on the different elements.

nigelt74




msg:4028594
 6:28 am on Nov 20, 2009 (gmt 0)

Thanks for that, setting different background Colours made all the difference to figuring out things.

In case anyone else has a similar problem (surely I am not the only thickie out there)I replaced the left and right footer spans with divs

that has the following CSS applied to it

div.left {
float:left;
width:500px;
}
div.right {
float:right;
width:400px;
}

and it works in IE6 and FF, can't test in anything else yet, but it looks promising

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved