SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 70
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 21

    CSS - Test Your CSS Skills Number 21 :Quiz now ended - Solution in post #48

    I promised you a quiz that would be a stickler so here it is

    Most of you already know how to make a "sticky footer" but in case you didn't here's a quick recap of the requirements.

    A "sticky footer" is a fixed height footer that sits at the bottom of the viewport, but only sits at the bottom of the viewport when there is not enough content to push it below the fold.

    If the page has more content than can fit in the viewport then the footer sits at the bottom of the content. It is not a fixed footer so don't confuse it.

    Here is a basic sticky footer that you can use as a start

    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">
    *{margin:0;padding:0}
    html,body{height:100%}
    #outer{
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height*/
    }
    * html #outer{height:100%}
    #header{
        border-top:40px solid #fff;/* soak up negative margin*/
        background:red;
    }
    #footer{
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin and header soak up*/
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>


    Now you may be wondering since I have given you the answer that this is going to be quite easy

    The problem I want you to solve is that the above code does not work in IE8 and does not work in Opera either.

    If you run the above code in Opera or IE8 everything at first appears to be correct. However if you grab the bottom of the window (not the sides) and move it up or down then the footer does not move with the window but stays put unless the screen is refreshed or if you resize horizontally.

    A vertical resize does not have any effect. This is undesirable and spoils a useful technique.

    I have attached a screenshot of the IE8 and Opera problem so that you can understand it better.

    Your mission is to make a version that will also work in IE8 and Opera (as well as ie6/7 and all other modern browsers).

    This is a real life quiz as I answer these questions daily although the IE8 problem is a relatively new one.

    Rules:


    • Must work in IE8 and Opera (as well as the existing browsers that it already works with).
    • The layout must work in various types of layouts (e.g. a centred layout or in a 100% wide layout) and must work with and without content.
    • No scripting allowed.
    • You can use conditional comments for the different IE versions.
    • The simpler the answer the better but whatever method you use this must be usable and robust .
    • You can use your own html and css


    I know of about 3 ways to solve this so there is room for variety. Hopefully some of you will find other ways that I have not thought of.

    Remember that "testing is the key" here and you must make sure that it works before you send it to me

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

    Any questions just ask and remember this is just for fun

    Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    test 20:
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hmm, my email check program sure comes in handy with finding out about new quizzes.
    and the fact that im in front of the pc all day. xD

    Your mission is to make a version that will also work in IE8 and Opera
    mission accepted.

    will be worked upon, this sunset.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    mission accepted.
    This thread will now self destruct in 30 seconds

  4. #4
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oooo I am so close

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Submitted-took me 30 seeconds.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Ryan that's very close but needs tidying up a little.

    You have found one of the solutions for IE8 and opera (although you wouldn't actually need to look too far but well spotted anyway)

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I tidied it up so all is well now. Was I first one? PS: I knew how to do the quiz from the start-I didn't look anywhere lol.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You are the first one with a working version in Opera and also IE8 but I have had one that works in IE8 from Gary Turner.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Ok, going to test for more of the possible ways to do the quiz-I only knew of the 1.
    Edit:

    I can get the footer to stay at the bottom but it is cheating since it doesn't really fix the vertical resize issue.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Another solution PM'd
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Before I send anything, I'd like to ask a question:

    The footer must NOT overlap the content, regardless of the height of the viewport, so even if I had a 400px high viewport filled with content, the footer MUST sit below it. Is that correct?

    I'm asking specifically because I have no problem making the footer sit at the bottom in Opera when resizing the window vertically, but I do have a problem making the footer not overlap content when resizing it to a narrower height than its content.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    If you have more content then the viewport it pushes the footer down and thus keeps the key point that the footer sticks to the bottom of the window.

    If you don't have enough content (as with the code Paul posted) then it goes to the bottom automatically and stays there on resize.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you have more content then the viewport it pushes the footer down and thus keeps the key point that the footer sticks to the bottom of the window.

    If you don't have enough content (as with the code Paul posted) then it goes to the bottom automatically and stays there on resize.
    Thanks, Ryan. But that is not my issue. If I understand correctly (and please do correct me, if I'm misunderstanding) the solution should work with and without content. I have created a sample WITH content. Let's say I have content that is around 400px in height and I resize the window to, say, 40px in height, then the footer will overlap everything. This is to be avoided. Is the assumption correct that the footer MUST NOT overlap any content regardless of my chosen viewport height?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yes you are right it should not overlap the content though you are overthinking it and trying to get it perfect . I just turned mine in without content and for the basics of this quiz I didn't care about making it fit every criteria.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes you are right it should not overlap the content though you are overthinking it and trying to get it perfect . I just turned mine in without content and for the basics of this quiz I didn't care about making it fit every criteria.
    You are right and it explains why I'm ditching one idea after the next. I have two different examples that both work in all older browsers + IE8 and Opera 9, but (with content) the footer overlaps the content when you minimize the window vertically to a ridiculously narrow vertical size and I don't want to submit it like this.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What should happen when you pull the bottom of the browser up, and you have content, is the footer should disappear, just like any other footer would.

    I've already seen the Opera solution, maybe I just never resized Opera before but I'd never noticed the problem before, and just added the old hack to a site yesterday : ) I suppose I should look to see how well it worked.

    IE8, still haven't downloaded. Maybe I could put it on the crappy work machine : )

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

    Quote Originally Posted by kohoutec
    Let's say I have content that is around 400px in height and I resize the window to, say, 40px in height, then the footer will overlap everything. This is to be avoided. Is the assumption correct that the footer MUST NOT overlap any content regardless of my chosen viewport height?
    This has been already explained but I'll try to clarify it a bit more

    The footer should never overlap any content at all.

    If you have a small amount of content the footer will sit at the bottom of the viewport. If you then resize the window smaller the footer will still stay at the bottom of the viewport until such time as it meets any content and then it stops going up just like a normal layout would.

    If you have a large amount of content then the footer is pushed below the fold and sits under all your content.

    The footer should never overlap the content and is the reason that a "sticky footer" needs to be a fixed height so that you can account for the fact that it will overlap unless you do something to stop it

    If you are still not sure then just test out the code I gave above in IE6/7 Firefox and see how it behaves with and without content when you resize the screen etc.

    If you have a fluid width footer containing fluid content then there obviously would be a point where the text will spill out of the height when the window is squeezed smaller.

    This is why fixed footers are best for a small coyright message, logo or a couple of small links. They are not suitable for lots of content in a fluid design. In a fixed width you can obviously cater for it much better and have more content as the height won't change.

    Hope that clears it up

  18. #18
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I know of about 3 ways to solve this so there is room for variety. Hopefully some of you will find other ways that I have not thought of.
    I know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.
    Simon Pieters

  19. #19
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    I know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.
    I'm sure they'd be grateful! No need for such generosity however: just file your bugs for Opera at bugs.opera.com/wizard/. My Opera 10a is certainly incorrect in how it displays Paul's example on first load or page refresh (although it corrects itself when resizing the viewport width).

    The resizing issue itself isn't a standards-comliance bug, however. CSS does not dictate browser UI behaviour, and browsers have no obligation to reflow a page when the viewport dimensions are changed. In practice though, any browser which failed to reflow on width changes would be very unpopular. Reflowing on height changes is a much less pressing concern, but still desirable of course. You could certainly send this issue to MS and Opera as an enhancement request.

    Happily for us there are work-arounds, as the quiz demonstrates!
    Last edited by Anton P; Apr 20, 2009 at 04:06. Reason: Clarified Opera 10a's bugginess

  20. #20
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok, yea, posted my solution, which is actually also one of your solutions paul.
    i didn't want to invent anything too complex this time, trying to learn to be more simple.

    This thread will now self destruct in 30 seconds
    hahaha, [jumps to cover]

    Ryan
    Submitted-took me 30 seeconds.
    seems ryan is the only one who made it out alive.


    edit:
    Stomme poes
    IE8, still haven't downloaded. Maybe I could put it on the crappy work machine : )
    i dont see why you cant install ie8 on your machine? or is it cause it's a linux or something?
    i dunno, but i just use IEtester for ie5-ie6-ie7 testing (which im sure you know about, but giving link to those who dont know)
    and i installed ie8 on my main machine, because its the only ie, im capable to look at without crying.

    p.s. i use windows for the purpose of methodically learning every bug that it has.

  21. #21
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Hampshire, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Really pleased that you've chosen this test, as it's one I've been banging my head against for two weeks now. I know this doesn't say much for my CSS skills (especially when Ryan can solve it in 30 seconds ) but at least I might find out the answer in a few days' time.

    Flippin' IE8!

    b.t.w. does anyone know what the "correct" behaivour is with respect to the CSS standards for this situation? Are IE8 and Opera ahead of the game and we all need to catch up, or are they just plain wrong?

  22. #22
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anton P View Post
    I'm sure they'd be grateful! No need for such generosity however: just file your bugs for Opera at bugs.opera.com/wizard/.
    We have several duplicate reports about this bug already. Hence the beer. (I work at Opera.)
    Quote Originally Posted by Anton P View Post
    My Opera 10a is certainly incorrect in how it displays Paul's example on first load or page refresh (although it corrects itself when resizing the viewport width).
    Yes, known bug.
    Quote Originally Posted by Anton P View Post
    The resizing issue itself isn't a standards-comliance bug, however. CSS does not dictate browser UI behaviour, and browsers have no obligation to reflow a page when the viewport dimensions are changed.
    Still, I would argue that this is clearly a bug.
    Simon Pieters

  23. #23
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    squig
    b.t.w. does anyone know what the "correct" behavior is with respect to the CSS standards for this situation? Are IE8 and Opera ahead of the game and we all need to catch up, or are they just plain wrong?
    i would say plain wrong, as the currently modernest (not a real word) browser (safari 10 to my knowledge) does not have this bug.

    IE8 simply avoids re-calculating the height if the width is not changed.
    your objective is to interrogate and force ie8 to do it.

    while opera ignores the whole min-height:100&#37; completely, and needs some suggestive css explaining for it to work.
    the same tactic as with ie8 works here too.


    edit:
    applause to paul, because these quizzes are by far the best references for css tips and tricks.

  24. #24
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    I work at Opera.
    Heh, I've returned to this thread to explain that I'd just figured that out from a comment by Paul in another thread . Now that I look at your signature, I recognize your name from Opera articles and W3C WG mailing lists. Hope you're doing fine!

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Simon
    know one way: find the relevant Opera developer and buy him some beer. Great way to get bugs fixed.
    To Simon -

    Will that do


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
  •