SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Does position:fixed work in earlier IE versions?

    In this site, the large photo and the taskbar on the left are supposed to stay fixed, while the content on the right is supposed to scroll. This is working fine in all browsers except IE 5.5 or 6. I am not sure how to fix this, and was wondering if I could get some help with this issue. Do the earlier IE versions not support position:fixed? Is there a way to go about fixing this without creating a whole new stylesheet?

    Here is the site:

    http://www.jameswebdevelopment.com/c.../portfolio.php

    Here is the css:

    Code:
    body, html {margin : 0 auto; padding : 0; color : #000; background : url("../pics/background_main.gif") repeat top left fixed;}
    body {min-width : 800px;}
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    /* Layout */
    #container {position : absolute; top : 0; left : 0; width : 800px; margin : 0; padding : 0; color : #000;}
    #container.resume, #container.portfolio {position : absolute; top : 0; left : 0; width : 900px; margin : 0; padding : 0; color : #000;}
    #leftcontainer {float : left; width : 350px; background : url("../pics/background.png") no-repeat top left; min-height : 100%; position : fixed;}
    #spacer {height : 280px;}
    #navbar {width : 120px; margin-left : 160px; padding : 5px; text-align : left; background-color : #3D59AB; border : 1px solid #000;}
    #navbar ul {list-style : none; padding : 5px; margin : 0; border : 1px solid #000;}
    #navbar ul li {padding : 0; margin : 0;}
    #navbarHome { width : 100px; height : 32px;}
    #navbarHome a {display : block; width : 100px; height : 32px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_home.gif"); }
    #navbarHome a:hover, #navbarHome a.focus {background : url("../pics/navbar/navbar_home_over.gif") no-repeat 0 0;}
    #navbarBio {width : 60px; height : 36px;}
    #navbarBio a {display : block; width : 60px; height : 36px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_bio.gif");}
    #navbarBio a:hover, #navbarBio a.focus {background : url("../pics/navbar/navbar_bio_over.gif") no-repeat 0 0;}
    #navbarPortfolio {width : 100px; height : 37px;}
    #navbarPortfolio a {display : block; width : 100px; height : 37px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_portfolio.gif");}
    #navbarPortfolio a:hover, #navbarPortfolio a.focus {background : url("../pics/navbar/navbar_portfolio_over.gif") no-repeat 0 0;}
    #navbarNews {width : 100px; height : 30px;}
    #navbarNews a {display : block; width : 100px; height : 30px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_news.gif");}
    #navbarNews a:hover, #navbarNews a.focus {background : url("../pics/navbar/navbar_news_over.gif") no-repeat 0 0;}
    #navbarResume {width : 100px; height : 35px;}
    #navbarResume a {display : block; width : 100px; height : 35px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_resume.gif");}
    #navbarResume a:hover, #navbarResume a.focus {background : url("../pics/navbar/navbar_resume_over.gif") no-repeat 0 0;}
    #navbarContact {width : 100px; height : 34px;}
    #navbarContact a {display : block; width : 100px; height : 34px; text-indent : -2000em; background-image : url("../pics/navbar/navbar_contact.gif");}
    #navbarContact a:hover, #navbarContact a.focus {background : url("../pics/navbar/navbar_contact_over.gif") no-repeat 0 0;}
    #rightcontainer {float : right; width : 450px;}
    #rightcontainer.resume, #rightcontainer.portfolio {float : right; width : 550px;}
    #header {margin : 10px 0; padding : 0; background-color : #EFEFEF; border : 1px solid #BFBFBF;}
    #header.resume, #header.portfolio {text-align : center; margin : 10px 0; padding : 0; background-color : #EFEFEF; border : 1px solid #BFBFBF;}
    #header img {border : 0;}
    #content {font-family : Arial, Verdana, Georgia, sans-serif; font-size : 12px; color : #000; padding : 5px; background-color : #EFEFEF; border : 1px solid #BFBFBF;} 
    #content a {color : #000;}
    #content a:hover, #content a:visited {color : #4B4B4B;}
    #content.resumemain ul li {padding : 5px 0;}
    #content.resumemain ul li a {font-size : 14px;}
    #content.resume ul {list-style : none; padding : 5px 0; margin : 0;}
    #content.resume.legit h2, #content.resume.legit h3, #content.resume.legit p, #content.resume.legit ul.stats {text-align : center;}
    #content.resume ul.stats li {display : inline; padding : 0 10px;}
    #content.resume ul.navbar2 {list-style : none; padding : 5px 0; margin : 0; text-align : center; background-color : #DFDFDF;}
    #content.resume ul.navbar2 li {display : inline; padding : 0 10px;}
    #content.resume ul li ul {width : 538px;}
    #content.resume ul li ul.alternate, #content.resume ul.navbar2 li {background-color : #DFDFDF;}
    #content.resume ul li ul li {display : table-cell; width : 125px; padding-right : 10px; text-align : left;}
    #content.resume ul li ul li.show {font-weight : bold;}
    #content #contact div.row {clear : both; padding : 2px 0;}
    #content #contact label {float : left; width : 100px;}
    #content #contact label.required {font-weight : bold;}
    #content #contact input {float : left;}
    div.spacer {clear : both;}	
    #footer {background-color : #EFEFEF; text-align : center; font-family : Verdana, Arial, Georgia, sans-serif; font-size : 11px; color : #000; padding : 10px 0; border : 1px solid #BFBFBF; margin : 5px 0;}
    #footer ul {list-style-type : none; padding : 0; margin : 0;}
    #footer ul li {display : inline;}
    #footer a {color : #000;}
    #footer a:hover {color : #4B4B4B;}
    img {border : 0;}
    h1 {font-size : 30px;}
    h2 {font-size : 24px;}
    h3 {font-size : 14px;}
    span.error {color : #FF0000; font-weight : bold;}
    /* Portfolio Slideshow */
    #portfolio {position:relative; width:536px; background:#EFEFEF; margin:0;}
    a.gallery, a.gallery:visited {display:inline; left : 5px; color:#000; text-decoration:none; border:1px solid #000; width:60px; height:60px; float:left; margin:2px; position:relative; cursor:default;}
    a.slidea {background:url("../pics/portfolio/thumbnail_blackdress02_small.gif");}
    a.slideb {background:url("../pics/portfolio/thumbnail_brownrain02_small.gif");}
    a.slidec {background:url("../pics/portfolio/thumbnail_purpleroof01_small.gif");}
    a.slided {background:url("../pics/portfolio/thumbnail_yellowcoat02_small.gif");}
    a.slidee {background:url("../pics/portfolio/thumbnail_White_Skirt_larger_small.gif");}
    a.slidef {background:url("../pics/portfolio/thumbnail_BWPeterBrownCloseup_small.gif");}
    a.slideg {background:url("../pics/portfolio/thumbnail_BWPeterBrownMature_small.gif");}
    a.slideh {background:url("../pics/portfolio/thumbnail_CurlyBWCloseup_small.gif");}
    a.slidei {background:url("../pics/portfolio/thumbnail_DreBlueCloseup_small.gif");}
    a.slidej {background:url("../pics/portfolio/thumbnail_DreBlueHeadTilt_small.gif");}
    a.slidek {background:url("../pics/portfolio/thumbnail_DreBWFront_small.gif");}
    a.slidel {background:url("../pics/portfolio/thumbnail_DreBWSide_small.gif");}
    a.slidem {background:url("../pics/portfolio/thumbnail_Dre1_00285_small.gif");}
    a.sliden {background:url("../pics/portfolio/thumbnail_Dre1_00403_small.gif");}
    a.slideo {background:url("../pics/portfolio/thumbnail_Dre1_00407_small.gif");}
    a.slidep {background:url("../pics/portfolio/thumbnail_Dre2_00125_small.gif");}
    a.slideq {background:url("../pics/portfolio/thumbnail_Dre2_00163_small.gif");}
    a.slider {background:url("../pics/portfolio/thumbnail_drebus_small.gif");}
    a.slides {background:url("../pics/portfolio/thumbnail_drebuslaptop_small.gif");}
    a.slidet {background:url("../pics/portfolio/thumbnail_Dre_cab_smile_small.gif");}
    a.slideu {background:url("../pics/portfolio/thumbnail_Dre_Matrix_BW_small.gif");}
    a.slidev {background:url("../pics/portfolio/thumbnail_DreFullLength_small.gif");}
    a.slidew {background:url("../pics/portfolio/thumbnail_dregreen44k_small.gif");}
    a.slidex {background:url("../pics/portfolio/thumbnail_dylanscandy_small.gif");}
    a.slidey {background:url("../pics/portfolio/thumbnail_shiranpink_small.gif");}
    a.slidez {background:url("../pics/portfolio/thumbnail_watermelon_small.gif");}
    a.slideaa {background:url("../pics/portfolio/thumbnail_espn_small.gif");}
    a.slidebb {background:url("../pics/portfolio/thumbnail_jane_small.gif");}
    a.slidecc {background:url("../pics/portfolio/thumbnail_NYTimes121105_small.gif");}
    a.slidedd {background:url("../pics/portfolio/thumbnail_trader_small.gif");}
    a.gallery span {visibility:hidden; display:block; position:absolute; height:450px; color:#000; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}
    a.slidea span {left: 0px; top:47px;}
    a.slideb span {left: 4px; top:47px;}
    a.slidec span {left: 8px; top:47px;}
    a.slided span {left: 12px; top:47px;}
    a.slidee span {right: 12px; top:47px;}
    a.slidef span {right: 8px; top:47px;}
    a.slideg span {right: 4px; top:47px;}
    a.slideh span {right: 0px; top:47px;}
    a.slidei span {left: 0px; top:0px;}
    a.slidej span {left: 4px; top:0px;}
    a.slidek span {left: 8px; top:0px;}
    a.slidel span {left: 12px; top:0px;}
    a.slidem span {right: 83px; top:-20px;}
    a.sliden span {right: 90px; top:-20px;}
    a.slideo span {right: 90px; top:-20px;}
    a.slidep span {right: 148px; top:-20px;}
    a.slideq span {left: 74px; top:-60px;}
    a.slider span {left: 70px; top:-60px;}
    a.slides span {left: 70px; top:-60px;}
    a.slidet span {left: 70px; top:-60px;}
    a.slideu span {right: 79px; top:-60px;}
    a.slidev span {right: 17px; top:-60px;}
    a.slidew span {right: 62px; top:-60px;}
    a.slidex span {right: 82px; top:-60px;}
    a.slidey span {left: 82px; top:-120px;}
    a.slidez span {left: 110px; top:-120px;}
    a.slideaa span {left: 70px; top:-120px;}
    a.slidebb span {left: 70px; top:-120px;}
    a.slidecc span {right: 79px; top:-120px;}
    a.slidedd span {right: 17px; top:-120px;}
    a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}
    a.gallery:hover span {visibility:visible; z-index:100;}
    a.gallery:hover span img {border:1px solid #000; position:relative; z-index:100;}
    a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}
    a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
    a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; z-index:10;}

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Internet explorer 5.x and 6 do not support position:fixed.
    Have a look there for a possible but problematic fix :
    http://tagsoup.com/cookbook/css/fixed/

  3. #3
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Still isn't working

    I am still having trouble with this. Is there a way that I can leave the HTML the way it is and only adjust the css, possibly creating a different stylesheet for IE 5.x and 6, to make this work? I would rather not have to change what already works in every other browser in the HTML.

    I tried Stu Nichols technique but I couldn't get it to work right. Any ideas would be truly appreciated.

    The site is here
    , and the css is as it is in the above posting.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will have to move the leftcontainer outside of the container and use this code for ie.

    Code:
    <!--[if lte IE 6 ]>
    <style type="text/css">
    html,body{overflow:hidden;height:100&#37;;}
    #container{
        height:100%;width:100%;
    overflow:auto;
    }
    #leftcontainer {position:absolute;left:0;top:0}
    #rightcontainer {float :left; width : 450px;margin-left:345px;display:inline}
    
    </style>
    <![endif]-->
    
    
    
    </head>
    <body>
        <div id="leftcontainer">
            <div id="spacer">&nbsp;</div>
            <div id="navbar">
                <ul>
                    <li id="navbarHome"><a class="focus" href="index.php">Home</a></li>
                    <li id="navbarBio"><a href="bio.php">Bio</a></li>
                    <li id="navbarPortfolio"><a href="portfolio.php">Portfolio</a></li>
                    <li id="navbarNews"><a href="news.php">News</a></li>
                    <li id="navbarResume"><a href="resume.php">Resume</a></li>
                    <li id="navbarContact"><a href="contact.php">Contact</a></li>
                </ul>
            </div>
        </div>
    <div id="container">
        <div id="rightcontainer">
    This can be a bit buggy so check that there are no side effects such as losing the scrollbar when closing the window.

    I have some examples here:

    http://www.pmob.co.uk/temp/fixedlayoutexample6.htm

    Use at your own risk


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
  •