SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 70 of 70
  1. #51
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    k, had free time, and i made a paul/maleika mix result, featuring the best of both solutions

    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100%;/* needed to base 100% height on something known*/
    }
    #outer {
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    }
    /* #inner protects any floats in the content from clearing the minheight float */
    #inner {
        width:760px;
        overflow:hidden;/* you could use float:left if you wanted content to overflow*/
        /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
    }
    #header {
        background:red;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin of #outer */
        clear:both;
    }
     
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
    }
    /*Opera Fix*/
    /*IE8 Fix*/
    #outer:after {
    	content:"";
    	float:left;
        width:0;
        height:100%;
        overflow:hidden;/* just in case*/
    }
    /*IE8 Fix*/
     
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    * html #outer {height:100%}/* ie6 needs this*/
    .minheight{display:none}/* ie6 and 7 don't need this */
    </style>
    <![endif]-->
    </head>
    <body>
     
    <div id="outer">
        <div id="inner">
            <div id="header">
                <h1>Sticky Footer</h1>
            </div>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Yurikolovsky

    Taking your lead here is another amalgamated version making the best of all worlds also.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100&#37;;/* needed to base 100% height on something known*/
    }
    #outer {
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    }
    /* #inner protects any floats in the content from clearing the :before float */
    #inner {
        width:760px;
        overflow:hidden;
        /* you could use float:left instead of overflow:hidden if you wanted content to overflow*/
        /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
    }
    #header {
        background:red;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin of #outer */
        clear:both;
    }
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
    }
    
    </style>
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <div id="header">
                <h1>Sticky Footer</h1>
            </div>
            <h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>

  3. #53
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i bet someone will make a even smaller/lighter version out of this :]

    by the way, i have never seen
    Code:
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100&#37;;display:table;}
    </style>
    <![endif]-->
    conditional comments like these before.

    also its a much better way of fixing the ie8 bug, its like 3 worlds now xD

    edit:
    it also looks stable enough to be used in a real world website without any fear.

    also whoever finds this, looking for a sticky footer demo will definitely find this much more useful than all the other crappy sticky footers that i see all over the internet.

    also you just gotta love the simple design of this solution.

  4. #54
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    [quoet]
    by the way, i have never seen
    [/quote]

    Yes there are a number of operators that you can use within conditional comments such as "!"= "not" and "|" = "or".

    There's a full rundown here.

    edit:
    it also looks stable enough to be used in a real world website without any fear.
    As far as I can tell it seems very stable but time will tell

  5. #55
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thanks for the link on conditional comments, very informative.

    edit:
    this code in the comments section
    Code:
    <!--[if IE 7 ]><div id="IE7"><![endif]-->
    <!--[if IE 6 ]><div id="IE6"><![endif]-->
    
    <p>regular html content</p>
    
    <!--[if (IE 6)|(IE 7)]></div><![endif]-->
    
    p {/* code for standard browsers*/}
    div#IE6 p {/* code for IE6 */}
    div#IE7 p {/* code for IE7 */}
    really did catch my eye, because i never thought of it like that.
    the only question here is.
    do the normal browsers (not ie) download the external stylesheets within ie's conditional comments?
    if not then the above is pointless (it is slightly faster for ie), if yes, then the above is a better way of doing ie specific code.
    it is definitely a better approach for small sites that require very few website-wide ie fixes.

  6. #56
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    As I understand it, conditional comments to a non-ie browser are treated like comments period. They must be loaded, they appear in View Source, but other than that, browsers take no consideration of them.

    IE-CC-placed elements who are addressed in the regular css sheet are treated by browsers as declarations for elements that don't exist in the HTML.

    If you're calling a <link> to an IE stylesheet in the <head> inside an IE-CC then the non-IE browsers don't do the GET request, but they see the comment in the <style> tag. If I look at my headers, Firefox doesn't call
    <if IE blah blah>
    <link rel="stylesheet" blah blah.... ie-only.css">
    </endif blah blah>

    from the server.

  7. #57
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes
    If I look at my headers, Firefox doesn't call "blah.blah.ie-only.css"
    well that is a good thing to know.
    >now why didn't i think of checking my headers in firefox!?!

    thinking some more about that method, it is definitely better for the ie part of the internet, especially in small websites with little ie-only css.
    (in terms of performance)
    (the gain might be minimal, but small+small = medium)

  8. #58
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Next quiz time??
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    I have one lined up for Sunday (or Saturday if I can get through my workload by then)

  10. #60
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    it seems in not the only one with a workload then xD

  11. #61
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes work always gets in the way of having a good time

  12. #62
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I think it should be saturday morning..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #63

  14. #64
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hmm, My copy of IE8 seems to be rendering the older sticky footer layouts just fine now. Perhaps the IE development folks viewed this thread and corrected the problem in a recent windows update.

    Paul, is your Ultimate Sticky Footer working in IE8 for you now?
    It does for me!

  15. #65
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hmm, My copy of IE8 seems to be rendering the older sticky footer layouts just fine now. Perhaps the IE development folks viewed this thread and corrected the problem in a recent windows update.

    Paul, is your Ultimate Sticky Footer working in IE8 for you now?
    It does for me!
    Hi Ray,

    That one isn't working in My IE8 (8.0.6001.18702). It works in compatibility view but not in IE8 for real.

    Is there a newer version than mine about?

  16. #66
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That one isn't working in My IE8 (8.0.6001.18702). It works in compatibility view but not in IE8 for real.
    Is there a newer version than mine about?
    Upon checking my version I see that it is the same (8.0.6001.18702).
    I have compatibility view turned off also and all my sticky footer layouts are working now. I remember viewing them back at the time of this quiz and sure enough they didn't work, hence the reason for the quiz. I assumed that there may have been a fix added to IE8 in one of my recent windows updates. I don't know what the deal is, I'll double check again.

  17. #67
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    That's strange let me know what you find out.

    I would have assumed the version number would have been changed if IE8 had been updated.

    Remember the problem with IE8 is not on first page load but only when you try to resize the viewport vertically.

  18. #68
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Remember the problem with IE8 is not on first page load but only when you try to resize the viewport vertically.
    Hi Paul,
    Ok, that's what I was missing. Reading back through your first post of this thread I see where you explained that and sure enough they are not working. That is the same problem with IE7 and the height:auto!important; rule.
    Sorry about the confusion, I'll get the IE8 fix updated on my demos asap.

  19. #69
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Ray

    Hopefully it will be a bug that gets addressed sometime soon.

  20. #70
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Update

    A fix for the extra wrapper needed due to the opera fix can be found here:

    http://www.sitepoint.com/forums/show...80#post4377680

    and amalgamated into this demo.

    Thanks to Erik and Ray for pursuing this further


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
  •