Bottom of Page Disappears in I.E.

footer disappears in I.E.

[Sparkliegirl]

Hi,

I have been struggling to make this page work in both I.E. and Netscape. Currently, in netscape 7, it's working well, but in IE 6 it seems that the bottom menu and footer information are not displaying. Can anyone offer any insight?

<snip>

Thanks,
SparklieGirl

[edited by: engine at 7:15 pm (utc) on Aug. 18, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[BlobFisk]

Welcome to WebmasterWorld, Sparkliegirl!

Have you put your HTML and CSS through a validator to see if that throws up any possible errors?

Exactly what is not working, and what method are you using to achieve this?

[BlobFisk]

One CSS error I spotted straight out is the occurance of two hash's in the color attribute on line 167 (##ffffcc) - this could be throwing everything below it out...

[Sparkliegirl]

Basically, the footer/lower menu won't displaying in I.E. However, if I comment out the middle 3 blocks, the bottom/footer area displays. :( I've been struggling with this trying to change div > span and back without any progress.

I've run a validator on my document and i can't seem to find anything wrong... there is a javascript function int he middle of my document (to create a scrolling banner)... could that cause an issue?

Thanks,
Heather

[Sparkliegirl]

Well, now it seems I've gotten my code working, except in IE 5.5 it's not showing two of the pieces:
<div class="bottom">
<div class="menu"><a class="aboutus" href="001.html">About<br>Us</a>
<a class="donate" href="077.html">Donate to<br>Spence-Chapin</a>
<a class="shop" href="007.html">Shop<br>Spence-Chapin</a>
<a class="events" href="014.html">Calendar<br>of Events</a>
<a class="contact" href="012.html">Contact<br>Us</a></div>

<div class="spence">Spence-Chapin &#183; 6 East 94th Street &#183; New York, NY 10128 &#183; 212-369-0300
<BR><A href="mailto:[e-mail]">[e-mail]</A> &#183;
<a href="privacypolicy.html">Privacy Policy</a><br>
&copy; Copyright 2003, Spence-Chapin. All Rights Reserved.</div></div>

The styles are:
.menu {
width:565px;
height:25px;
background-color:#ffff99;
color:#0033cc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:10px;
text-align:center;
text-decoration:none;
position:relative;
margin-top:0px;
top:315px;
left:0px;

}

.aboutus {
width:85px;
padding:0px;
float:left;
position:relative;
left:5px;

}
.donate {
width:110px;
padding:0px;
float:left;
position:relative;
left:20px;

}
.shop {
width:110px;
padding:0px;
float:left;
position:relative;
left:45px;

}
.events {
width:110px;
padding:0px;
float:left;
position:relative;
left:50px;

}
.contact {
width:85px;
padding:0px;
float:left;
position:relative;
left:50px;

}

.spence {
width:575px;
height:50px;
background-color:#ffffff;
float:left;
color:#0033cc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-left:0px;
text-align:center;
position:relative;
text-decoration:none;
margin-top:15px;
top:315px;

}
.bottom {
width:575px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;

It shows up properly in IE 5.0 & 6.0 and Netscape 7.0. Any suggestions?

Thanks,
SparklieGirl

[BlobFisk]

In your style .menu, you have it as position:relative, but you are trying to give it a top:315px; value. A relatively positioned <div> cannot take a top or left value, only absolutely positioned layers take these values.

Also, [blue].spence[blue] also has a float and a relative attribute - it may only take one or the other. Again, there is a top value specified...

HTH

[DrDoc]

A relatively positioned <div> cannot take a top or left value, only absolutely positioned layers take these values.

What?!

[w3.org...]

An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties: top, right, bottom, left

[Sparkliegirl]

Thanks! Now it's working right.

Best,
Heather

[BlobFisk]

DrDoc,

I stand corrected. I was always under the impression that relative divs didn't take top or left... But, the W3C doesn't lie! Thanks for the heads up! Interesting:

The offset is specified by the 'top', 'bottom', 'left', and 'right' properties.

Sparkliegirl,

What did you do to fix it?