footer problems in safari and IE6
Posted: Tue May 19, 2009 11:57 pm
okay, so here are the two problems:
in safari:
- if my page has no content (for example, an user is viewing another user's profile, click the button that says 'posts by this user'...but that user has no posts)... So, what happens is the footer appears at the top of the page, even above my text that says, 'user has no posts right now'... why is this happening?
- second problem, footer goes up the page if content does not extend all the way down. so if a page doesn't have much info, the footer moves upward in the browser window.
here is the code for the library file and the code for the footer css rule:
css:
library code
in safari:
- if my page has no content (for example, an user is viewing another user's profile, click the button that says 'posts by this user'...but that user has no posts)... So, what happens is the footer appears at the top of the page, even above my text that says, 'user has no posts right now'... why is this happening?
- second problem, footer goes up the page if content does not extend all the way down. so if a page doesn't have much info, the footer moves upward in the browser window.
here is the code for the library file and the code for the footer css rule:
css:
Code: Select all
#footer {
position: relative;
margin-top: -25px; /* negative value of footer height */
height: 25px;
clear:both;
text-align: center;
font-size: 13px;
color: #000;
bottom: 0px;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;
}
.clearfix {display: block;
}#footer {
position: relative;
margin-top: -25px; /* negative value of footer height */
height: 25px;
clear:both;
text-align: center;
font-size: 13px;
color: #000;
bottom: 0px;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;
}
.clearfix {display: block;
}
Code: Select all
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<div id="footer"><span class="boldFont">© 2009 mysite</span> <a href="advertise.php" class="linkFooter">advertise</a> | <a href="termsANDagreement.php" class="linkFooter">terms of use</a> | <a href="news.php" class="linkFooter">news</a> | <a href="help.php" class="linkFooter">help</a></div>
<!-- #EndLibraryItem -->