Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Fixed header and footer for IE

    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
    Code:
    <!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
    Code:
    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •