Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Apr 2009
    Posts
    1
    Member #
    18880
    Hey all, I'm fairly new to web design, and am currently working on a site that can be viewed at http://www.strikingsites.com/morning...ngsunhome.html.
    I'm trying to have my header/navigation at the bottom of the page stay in a fixed position.
    It looks fine in Firefox, but not in IE, even versions 7 and 8 (which I'm mostly concerned about).
    Here is the CSS:
    #wrapper {
    height: 600px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }
    #wrapper #body {
    height: 511px;
    width: 800px;
    z-index: 2;
    overflow: visible;
    }
    p {
    font-family: "Myriad Pro", "Arial Narrow";
    font-size: 14px;
    color: #333;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 15px;
    }
    #wrapper #header {
    clear: both;
    height: 100%;
    width: 800px;
    position: fixed;
    z-index: 1;
    background-color: #FFF;
    visibility: visible;
    }
    #wrapper #header #headerleft {
    float: left;
    height: 89px;
    width: 403px;
    }
    h1 {
    font-family: Helvetica, "Arial Narrow", "Times Roman";
    font-size: 14px;
    line-height: 27pt;
    color: #FFF;
    margin-right: 30px;
    margin-left: 30px;
    }
    #wrapper #body #rightcolumn {
    background-color: #fff;
    float: right;
    height: 511px;
    width: 450px;
    padding-top: 15px;
    }
    #wrapper #header #navigation {
    float: right;
    height: 37px;
    width: 397px;
    }
    #wrapper #body #leftcolumn {
    background-color: #FFF;
    background-image: url(images/leftcolumnbackground.gif);
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    height: 511px;
    width: 350px;
    margin-top: 15px;
    }
    #wrapper #body #rightcolumn #rightcolumnpic2 {
    float: right;
    height: 576px;
    width: 450px;
    padding-top: 15px;
    margin-bottom: 100px;
    }
    #wrapper #header #navigation #navigationleft {
    clear: left;
    float: left;
    height: 36px;
    width: 335px;
    }
    #wrapper #header #navigation #mavigationbuttons {
    float: right;
    height: 37px;
    width: 62px;
    }
    a {
    font-family: "Myriad Pro", "Arial Narrow";
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #666;
    }
    a img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    ul {
    font-family: "Myriad Pro", "Arial Narrow";
    font-size: 14px;
    color: #333;
    list-style-image: url(images/bullet.gif);
    margin-right: 15px;
    }

    #wrapper #header #headerrightspacer {
    float: right;
    height: 52px;
    width: 397px;
    }
    #wrapper #body #rightcolumn #rightcolumnpic1 {
    float: right;
    height: 312px;
    width: 450px;
    }

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance you could show us what it looks like in IE7/8? position fixed should work correctly in those browsers, since you have a doctype on your page.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com