...

View Full Version : Fixed header and footer for IE



EricaL
04-22-2011, 04:43 AM
Hi all,

I've created a website which is one page, and has content that scrolls between a fixed header and footer. The position: fixed attribute works fine in all browsers - firefox, chrome, safari, and IE8 - but doesn't seem to work in IE6 or 7.

I was wondering how to make this possible. Below is my code. Here's a link to the live version of it:
http://www.ericaftw.com/newportfolio

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EricaFTW.com :: The Online Portfolio of Erica Lenti</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if gte IE 8]>
<style>
.box {
behavior: url(ie/PIE.htc);
}

.homeheading {
behavior: url(ie/PIE.htc); /* ie hack */
}
</style>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript" src="js/basic.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script language="Javascript" type="text/javascript" src="js/filter.js"></script>
<script language="Javascript" type="text/javascript" src="js/scroll.js"></script>
</head>

<body>

<div id="container">
<div id="header">
<div id="banner"><a href="index.html"><img src="images/logo.png" alt="EricaFTW.com" title="EricaFTW.com" border="0" class="logo" /></a></div>
<div id="navigation">
<ul>
<li><a href="#home" class="navhome">Home</a></li>
<li><a href="#about" class="navabout">About</a></li>
<li><a href="#work" class="navwork">Work</a></li>
<li><a href="#" class="navcontact">Contact</a></li>
</ul>
</div>
</div>

<div id="wrapper">

<div id="home">
<div class="homeheading"><p>Hi, I'm Erica. I'm a young writer from Toronto, Canada. Welcome to my world.</p></div>
<div class="box">
<div class="content">
<iframe src="http://player.vimeo.com/video/20732587?color=ffffff" width="740" height="439" frameborder="0"></iframe>
</div>
</div>
</div>
<div id="about">
<div class="box">
<div class="content">
<div class="left"> <img src="images/headings/about.png" alt="About" title="About" border="0" class="heading" /><br />
<img src="images/me.png" alt="Hi, this is me!" title="Hi, this is me!" border="0" id="me" />
</div>
<div class="right">
<p>Hi, my name is <span class="name">Erica Lenti</span>. I'm a simple girl that likes sunsets,
storybook romances, and long walks on the beach.</p>
<p><em>...Just kidding</em>. I'm a young girl (17, to be exact) with a sheer
curiousity for the world around me. An aspiring journalist hailing
from Toronto, Canada, I am currently a high school student and will
be studying journalism at Ryerson University in Toronto in September
of 2011. In the past, I have written for publications such as <a href="http://www.soniceclectic.com" target="_blank">
<em>Sonic Eclectic Magazine</em></a>, <a href="http://my-roots.ca" target="_blank"><em>MY-ROOTS Online</em></a>, and
<a href="http://www.tcdsb.org/marshallmcluhan" target="_blank"><em>the McLuhan Medium</em></a>.</p>
<p>When I'm not writing, I'm designing websites, making music, and volunteering
in the community. </p>
<p>I hope you find my world just as fascinating as I do!</p>
<p>(And who am I kidding? I love long walks on the beach!)</p>
<br />
</div>
</div>
</div>
</div>

<div id="work">
<div class="box">
<div class="content">
<img src="images/headings/work.png" alt="Work" title="Work" border="0" class="heading" />
<div id="freelance">
<h3>I am currently freelancing and I am always looking for new work. <a href="docs/resume.pdf">Download my resumé</a>
or <a href="#" class="workcontact">get in touch with me</a>.</h3>
<br />
</div>
<ul id="portfolio-filter">
<li class="current"><a href="#all">All</a></li>
<li><a href="#medium" rel="medium">The McLuhan Medium</a></li>
<li><a href="#sonic" rel="sonic">Sonic Eclectic</a></li>
<li><a href="#roots" rel="roots">MY ROOTS</a></li>
<li><a href="#shred" rel="shred">Shred News Online</a></li>
</ul>
<ul id="portfolio-list">
<li class="medium"><a href="http://www.tcdsb.org/marshallmcluhan" target="_blank">GSAs in the Catholic Community</a>
<br /> <em>Apr. 2011</em></li>
<li class="medium"><a href="http://ericaftw.com/portfolio/portfolio/part-time-jobs.html" target="_blank">Part Time Jobs: Good
or Bad?</a><br /> <em>Dec. 2010</em></li>
<li class="sonic"><a href="http://soniceclectic.com/2010/11/%E2%80%9Cdo-i-look-slutty-in-this%E2%80%9D-%E2%80%93-the-dirt-on-%E2%80%98dirty%E2%80%99-dressing/" target="_blank">Do I Look Slutty in This?!</a><br /> <em>Nov. 21 2010</em></li>
<li class="sonic"><a href="http://soniceclectic.com/2010/11/cheater-cheater-pumpkin-eater/" target="_blank">Cheater, Cheater, Pumpkin Eater</a><br /> <em>Nov. 9 2010</em></li>
<li class="sonic"><a href="http://soniceclectic.com/2010/10/tackling-bullying-with-spirit/" target="_blank">Tackling Bullying With Spirit</a><br /> <em>Oct. 25 2010</em></li>
<li class="sonic"><a href="http://soniceclectic.com/2010/10/the-sober-truth-on-underage-drinking/" target="_blank">The Sober Truth on Underage Drinking</a><br /> <em>Oct. 17 2010</em></li>
<li class="sonic"><a href="http://soniceclectic.com/2010/10/the-chronicles-of-being-a-senior-choosing-a-college-picking-your-major-and-everything-in-between/" target="_blank">The Chronicles of Being a Senior...</a><br /> <em>Oct. 4 2010</em></li>
<li class="roots"><a href="http://www.my-roots.ca/miscellaneous/scholarships-101/" target="_blank">Scholarships 101</a><br /> <em>Oct. 2010</em></li>
<li class="shred"><a href="http://ericaftw.com/portfolio/portfolio/part-time-jobs.html" target="_blank">High Places vs. Mankind Album Review</a><br /> <em>Jun. 7 2010</em></li>
<li class="shred"><a href="http://www.shrednews.com/reverie-sound-revue" target="_blank">Band You Should Know: Reverie Sound Revue</a><br /> <em>May 17 2010</em></li>
<li class="shred"><a href="http://www.shrednews.com/tegan-and-sara-alligator/" target="_blank">Tegan &amp; Sara Alligator Review</a><br /> <em>May 10 2010</em></li>
<li class="medium"><a href="http://ericaftw.com/portfolio/portfolio/paramore-rocks-the-haus.html" target="_blank">Paramore Rocks the Haus</a><br /> <em>Dec 2009</em></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>

<div id="spacer">&nbsp;&nbsp;&nbsp;</div>

<div id="basic-modal-content">
<div id="contact">
<div class="box">
<div class="content">
<span class="simplemodal-close"><img src="images/x.png" border="0" alt="Close" title="Close" /></span>
<img src="images/headings/contact.png" alt="Contact" title="Contact" border="0" class="heading" />
<h3>Feel free to fill in the form below to get in touch with me. Or, if you prefer a more direct approach,
e-mail me -- <a href="mailto:hello@ericaftw.com?subject=Hello,%20Erica!">hello@ericaftw.com.</a></h3>
<div id="form">
<h3>Get in Touch:</h3>
<form method="post" action="mailer.php" class="form">
Name:<br />
<strong><em><span><span><input type="text" name="name" size="25"></input><br /></span>
</span></em></strong><br />
Email<br />
<strong><em><span><span><input type="text" name="email" size="25"></input><br /></span></span>
</em></strong><br />
Message:<br />
<strong><em><span><span><textarea rows="9" name="message" cols="30"></textarea><br /></span></span>
</em></strong><br />
<br /><br /><br /><br /><br />
<input type="submit" value="Submit" name="submit"></input>
</form>
</div>
<div id="social">
<h3>Find me:</h3>
<ul>
<li class="twitter"><a href="http://www.twitter.com/ericalenti" target="_blank">on Twitter</a></li>
<li class="facebook"><a href="http://www.facebook.com/ericalenti" target="_blank">on Facebook</a></li>
<li class="lastfm"><a href="http://www.last.fm/user/ericaftw" target="_blank">on last.fm.</a></li>
<li class="youtube"><a href="http://www.youtube.com/user/ericaftw" target="_blank">on YouTube</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>

</div>

<div class="push"></div>

<div class="footer">
<p>Copyright 2011 | Design by Erica Lenti | <a href="credits.html">Credits</a></p>
</div>



</div>

</body>
</html>


CSS

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

body {
background: url('../images/bg.gif') #c3c3c3;
font-family: Helvetica, Arial, sans-serif;
}

#container {
min-height: 100%;
position: relative;
* height: 100%;
margin: 0 auto -46px;
}

/* links */

a:link {
color: #444;
text-decoration: none;
}

a:hover {
color: #000;
text-decoration: none;
border-bottom: #000 1px dotted;
}

a:active {
color: #000;
text-decoration: none;
}

a:visited {
color: #AAA;
text-decoration: none;
}

/* header */

#header {
width: 100%;
height: 165px;
position: fixed;
z-index: 999;
}

#banner {
background: url('../images/banner.png') repeat-x;
width: 100%;
height: 130px;
}

.logo {
padding: 15px 0 0 0;
width: 291px;
height: 95px;
display: block;
margin: 0 auto;
}

* .logo a {
text-decoration: none;
}

/* navigation */

#navigation {
float: left;
width: 100%;
position: relative;
}

#navigation ul {
position: relative;
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
text-align: center;
}

#navigation ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}

#navigation ul li a {
float: left;
/*display: block;*/
margin: 8px 50px;
padding: 0 0 8px 0;
color: #7D7D7D;
text-decoration: none;
text-transform: uppercase;
font-size: 12pt;
height: 15px;
}

#navigation ul li a:hover {
color: #222;
}

.navhome:hover {
border-bottom: 3px #ff00b1 solid;
}

.navabout:hover {
border-bottom: 3px #ff9200 solid;
}

.navwork:hover {
border-bottom: 3px #43a5cd solid;
}

.navcontact:hover {
border-bottom: 3px #ff00b1 solid;
}

/* box css */

.box {
position: relative;
width: 760px;
height: 100%;
* height:; /* ie7 hack */
line-height: 0;
margin: auto;
top: 210px;
background: #fff;
-webkit-box-shadow: #888 0px 0px 15px;
-moz-box-shadow: #888 0px 0px 15px;
box-shadow: #888 0px 0px 15px;
padding: 10px;
}

.content {
padding: 10px;
background: #DDD;
color: #777;
line-height: 200%;
font-size: 11pt;
}

/* home content style */

#home {
position: relative;
}

.homeheading {
position: relative;
top: 190px;
width: 760px;
margin: 0 auto;
letter-spacing: -0.5px;
font-size: 16pt;
text-align: center;
color: #FFF;
background: #ff00b1;
-webkit-box-shadow: #888 0px 0px 15px;
-moz-box-shadow: #888 0px 0px 15px;
box-shadow: #888 0px 0px 15px;
padding: 2px 10px;
}

/* about content style */

#about {
position: relative;
top: 845px;
font-weight: 200;
}

.left {
float: left;
}

#me {
padding: 5px 20px;
}

.right {
position: relative;
margin-left: 300px;
margin-top: 55px;
width: 350px;
}

/* work content style */

#work {
position: relative;
top: 2000px;
font-weight: 200;
}

#freelance {
position: relative;
margin-top: -10px;
width: 750px;
margin: 0 auto;
}

/* portfolio filter script */

.publication {
font-style: oblique;
font-size: 10pt;
}

ul#portfolio-filter {
float: left;
position: relative;
top: -20px;
font-size: 12pt;
list-style: none;
margin-left: 0;
width: 100%;
}

ul#portfolio-filter li {
border-right: 1px solid #AAA;
float: left;
margin-right: 10px;
padding-right: 10px;
}

ul#portfolio-filter li:last-child {
border-right: none;
margin-right: 0;
padding-right: 0;
}

ul#portfolio-filter a {
color: #444;
text-decoration: none;
}

ul#portfolio-filter li.current a {
color: #333;
font-weight: bold;
}

ul#portfolio-list {
list-style: none;
margin-left: 0;
width: 708px;
position: relative;
top: -20px;
}

ul#portfolio-list li {
float: left;
margin: 0 10px 10px 0;
padding: 5px;
width: 216px;
font-size: 10pt;
}

/* popup contact box */

#basic-modal-content {
display: none;
position: absolute;
top: -155px;
}

#simplemodal-overlay {
background-color: #000;
}

.simplemodal-close {
width: 25px;
height: 29px;
display: inline;
z-index: 3200;
position: absolute;
right: -8px;
top: -6px;
cursor: pointer;
}

/* contact content style */

#contact {
}

#form {
width: 400px;
float: left;
margin-top: -20px;
}

h3 {
font-weight: 200;
}

/* external links */

#social {
position: relative;
margin-left: 450px;
width: 200px;

}

#social ul {
list-style-image: url('../images/bullet.png');
}

/* contact form */

strong { background: url('../images/form/input-bottom-left.gif') no-repeat 0 100%; display: block; float: left; } /*longer sides*/
strong em { background: url('../images/form/input-top-right.gif') no-repeat 100% 0; display: block; float: left; } /*longer sides*/
strong em span { background: url('../images/form/input-bottom-right.gif') no-repeat 100% 100%; display: block; float: left; }
strong em span span { background: url('../images/form/input-top-left.gif') no-repeat; display: block; float: left; }
input, select, textarea { margin: 1px 3px; border: 1px solid #fff; }

/* footer */

.push {
height: 46px;
}

.footer {
z-index: 999;
position: fixed;
bottom: 0; /* stick to bottom */
background: url('../images/footer.png') repeat-x;
width: 100%;
height: 46px;
margin-top: -46px;
clear: both;
}

.footer p {
position: relative;
top: 3px;
left: 20px;
color: #FFF;
font-size: 10pt;
}

.footer p a {
color: #FFF;
}

/* additional */

.photo {
display: block;
margin: 0 auto;
}

.heading {
margin-left: -10px;
margin-bottom: 15px;
}

.name {
color: #ff9200;
font-weight: 700;
}

.clear {
clear: both;
}

#spacer {
position: relative;
top: 2200px;
height: 500px;
}

Thanks in advance,
Erica

abduraooft
04-22-2011, 11:21 AM
I was wondering how to make this possible.
There's a way, but you need to sacrifice a little. Have a look at http://www.cssplay.co.uk/layouts/fixed.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum