SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fixed header and footer with scrolling content area... promblems in IE7

    Good day everyone!

    Well I have set out to use a template example that was developed in 2004 because it fit my idea well. It works well in MOZ but the footer doesn't work on the IE7 view. GGGGggrrr.

    I am not knowledgeable enough to think up a hack. Anybody have a solution they could explain?

    Heres the link:
    http://www.blowupyourtv.com/powerbit/ampelos/index.htm

    css
    HTML Code:
    html {
    height:100%; 
    max-height:100%;  
    background:#fff; 
    font-size:76%; 
    font-family:arial;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
    }
    
    body {height:100%; 
    max-height:100%; 
    overflow:hidden;}
    
    * { margin:0; padding:0;}
    
    #content {overflow:auto; 
    position:absolute; 
    z-index:3; 
    top:103px; 
    bottom:50px; 
    left:0; 
    right:0; 
    background:#eee;}
    
    * html #content {top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    height:100%; 
    max-height:100%; 
    width:100%; 
    overflow:auto; 
    position:absolute; 
    z-index:3; 
    border-top:103px solid #fff; 
    border-bottom:50px solid #fff; 
    border-left:0;}
    
    
    #head {background: #000 url(navbar.jpg) repeat-x;
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
    width:100%; 
    height:103px; 
    background-position:0 0;  
    font-size:4em; 
    z-index:5; 
    overflow:hidden; 
    color:#fff;}
    
    /* Channels Navigation */
    
    #channels {
    position:absolute; 
    top:0; 
    left:0; 
    float:left;
    width:100%;
    height:67px;
    font-size:100%;
    line-height:normal;}
    
    #channels ul {padding:0px 0px 0 0px;}
    #channels li {display:inline;}
    #channels a {
    float:left;
    padding:9px 0px 0 0px;
    text-decoration:none;}
    #channels a span {
    loat:left;
    display:block;
    width:114px;
    background:url("nav_mouse_over.gif") no-repeat right top;
    padding:22px 0px 19px 0px;
    text-align: center;
    font-size:28%;
    color:#FFF;}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #channels a span {float:none;}
    /* End IE5-Mac hack */
    #channels a:hover span {color:#FFF;}
    #channels a:hover {background-position:0% -60px;}
    #channels a:hover span {background-position:100% -60px;}  
    #channels #current a span{background-position:0% -60px;}
    #channels #current a  {background-position:100% -60px;}
    /* 2ND Level Navigation */
    body#home#nav2 {background: #000 url(nav2_home_bg.gif) x-repeat; float:left; width:100%; height:36px; line-height:normal;}
    
    #nav2 ul {padding:0px 0px 0 0px;}
    #nav2 li {display:inline;}
    #nav2 a {
    float:left;
    padding:14px 0px 0 0px;
    text-decoration:none;}
    #nav2 a span {
    loat:left;
    display:block;
    heigth: 36px;
    padding:22px 0px 14px 0px;
    text-align: center;
    font-size:20%;
    color:#FFF;}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav2 a span {float:none;}
    /* End IE5-Mac hack */
    #nav2 a:hover span {color:#FFF; font-weight: bold;}  
    #nav2#selected a span{color:#FFF; font-weight: bold;}
    
    
    
    h1 { font-size:50%; padding:0 0 0 0;}
    h1 a {text-decoration:none; cursor:pointer; color:#ccc;}
    h1 span {display:block;
     background:url(navbar.jpg) repeat-x;
     width:100%; height:67px; 
     position:absolute; top:0; left:0;}
    
    #foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}
    
    
    #left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}
    
    * html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
    
    #content p {padding:10px;}
    .bold {font-size:1.2em; font-weight:bold;}
    
    dd {display:none;}
    a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
    a.nav:hover {background:#000; color:#fff;}
    html
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--- IE quirks mode --->
    <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Ampelos - Stay connected!</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="title" content="">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="includes/browser_controls.css">
    </head>
    
    <body id="home">
    <div id="head"> 
    <h1>Ampelos<span></span></h1>
      <div id="channels"> 
        <ul>
          <li id="current"><a href="Home.html"><span>Home</span></a></li>
          <li><a href="about.html"><span>About</span></a></li>
          <li><a href="activities.html"><span>Activities</span></a></li>
          <li><a href="contact.html"><span>Contact</span></a></li>
        </ul>
       </div>
       <div id="nav2">
         <ul>
          <li id="selected"><a href="Home.html"><span>Home</span></a></li>
          <li><a href="about.html"><span>About</span></a></li>
          <li><a href="activities.html"><span>Activities</span></a></li>
          <li><a href="contact.html"><span>Contact</span></a></li>
        </ul>
       </div>
    </div>
    <div id="foot">&nbsp;&copy;2004 Stuart A Nicholls</div>
    
    <div id="content"> 
      <h2>Pollution ~ the facts.</h2>
      <p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and 
        Firefox</p>
      <p>NN7 displays correctly but the absolutely positioned div in the content area 
        stays 'fixed' as the content scrolls.</p>
      <p>The menus on the left are produced using definition lists which are easier 
        to work with than unordered lists and have the additional benefit that you 
        can give a 'definition' of each link for text-only browsers.</p>
      <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. </p>
      <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. </p>
      <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. </p>
      <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p>
      <p>&copy; 2004/5/6 Stuart Nicholls</p>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-451410-1";
    urchinTracker();
    </script>
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This layout does require IE to be in quirks mode, which it isn't at the maoment. The comment line <!--- IE quirks mode ---> needs to go before the doctype to work.

  3. #3
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks man! Centauri that did the trick... thanks for looking...


Bookmarks

Posting Permissions

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