SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 59
  1. #1
    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)

    Opera body:before float ? (sticky footer)

    Ok, I know that the fix for Opera when using the body:before float is an extra inner wrapping div to keep it from clearing any other floats.
    http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm

    My question is this: Is Opera actually getting this wrong? It seems to be the odd man out in the way it displays the float.

    Opera is the only one that will actually show the float when a width and a BG color is set for the sake of testing. (as seen in my code below)

    I like setting a bottom padding on the content div rather than a top dummy border on the header with negative top margin on the wrapper. I was able to come up with an AP Sticky Footer that works flawlessly.

    Here is Opera clearing the content div (wrongly I assume) while using the clearfix method -
    (works as expected in FF and IE)
    Any thoughts on Opera and the body:before float?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sticky Footer</title>
    <style type="text/css">
    * {margin:0;padding:0;}
    
    html, body {height:100%;}
    
    body {   
        background: #BBB;
        font:100% arial,"trebuchet ms",tahoma;
        color: #000;
    }
    body:before {/*Opera min-height 100% Fix*/
        content:"";
        height:100%;
        float:left;
        width:20px;/*reset to zero after Opera testing*/
        background:red;/*just for testing with width*/
    }
    #wrapper:after,
    #content:after {/* Float Containment, IE6/7 will need "haslayout"*/
        clear:both;
        content:"";
        display:block;
        height:0;
        font-size:0;
    }
    
    /*===  Begin Layout Structure ===*/
    
    #wrapper {
        min-height:100%; /*height is determined from parent's height (html & body)*/
        width:800px;
        margin: 0 auto ;
        border-left: 1px solid #000;
        border-right: 1px solid #000;       
        background: #EEF;
    }
    #header{
        height:100px;
        background: #8088C6;
        border-bottom:1px solid #000;
        text-align:center;
        font-weight:bold;
    }
    #content {
        width:100%;/*haslayout*/
        padding-bottom:61px; /*preserve footer space (plus 10px for text spacing)*/
        background:lime; 
    }
    #testfloat{
        float:right;
        width:200px;
        height:160px;
        margin-right:-40px; 
        position:relative;
        background: #BDC2E2;
        border: 1px solid #000;
    }
    #footer {
        clear:both;
        width:800px;
        height:50px;
        margin:-51px auto 0;
        border-top:1px solid #000;
        background:#8088C6;
        text-align:center;
        position:relative; z-index:1;
    }
    
    /*=== Demo Typography ===*/
    h1,h2,h3 {padding:10px 10px 0; text-align:center;}
    h1 {font-size:1.55em}
    h2 {font-size:1.45em;}
    p {padding:10px 10px 0;}
    #footer p {line-height:50px; padding:0; font-weight:bold}
    </style>
    
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #wrapper {
        height:100%; /*IE8 needs height:100% with display:table;*/
        display:table; /*IE6 ignores display:table; and sees height:100%; as min-height*/ 
    }
    </style>
    <![endif]-->
    
    </head>
    <body>  
    
    <div id="wrapper">  
        <div id="header">
            <h1>Sticky Footer</h1>      
        </div>    
        <div id="content">
            <h2>Page Title</h2> 
            <p>This demo uses no extra markup in the html for Opera and IE8 compliance.<br> 
            IE8 is fed a Conditional Comment that uses display:table; to fix it's min-height:100%; bug.</p>
            <p>Reduce viewport height to scroll content and test sticky footer.</p>
            <div id="testfloat">
                <p>This is just a test float to ensure that #content is containing it's floats.</p>
            </div> 
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Last Content</p>          
        </div> <!-- end content -->
    </div> <!-- end wrapper -->          
        
        <div id="footer">
            <p>Sticky Footer</p>
        </div> <!-- end footer -->
    
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ray I'm a bit cnofused. I'm using Opera 10 and I changed the width as the comment suggested and nothing happened. What were you referring to? I didn't notice anything obvious.

    And Opera's need for the body:before trick is it's own rendering fault to begin with.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    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)
    Opera's need for the body:before trick is it's own rendering fault to begin with.
    That's what I was asking about, whether or not Opera is showing the float incorrectly. I was assuming that Opera is wrong thus the reason it works for that browser.

    I changed the width as the comment suggested
    I got it set at 20px in the code above just for the sake of testing with a BG color. As I said Opera is the only one that shows the float at 20px wide by 100&#37; tall. The comment about resetting it to zero does not pertain to my question in this thread, that was just a note to not use the layout with a width on the float. I set the width to figure out what Opera was doing.

    So, this is wrong behavior that Opera is showing?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yea the trick allows for Opera to do vertical ersizing and by nature that is a rendering fault.
    Updating dynamic content-aka in this case-vertical heights has always been Opera's Achilles' heel.

    Opera is wrong in this case. Technically empty elements (which is what :before injects, but not into the DOM (it can't be recognized there)) are supposed to be ignored by UA's but Opera wrongly interprets them and renders them and since it has the details of what is supposed to fix this wrong behavior it acts on iit and thus it is fixed.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    That's what I was asking about, whether or not Opera is showing the float incorrectly.
    Why would it not be shown? Surely it should be shown just like any other :before box?

    Quote Originally Posted by Rayzur View Post
    As I said Opera is the only one that shows the float at 20px wide by 100% tall.
    I see the red float in Firefox and Safari, too.

    Quote Originally Posted by Rayzur View Post
    So, this is wrong behavior that Opera is showing?
    The wrong behavior in Opera is that without the float, Opera doesn't reflow when the window is resized. Showing the float is correct behavior.
    Simon Pieters

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Opera is wrong in this case. Technically empty elements (which is what :before injects,
    My understanding of CSS21 is that :before { content:'' } generates a CSS box. Indeed, if it didn't, the #content clear float fix wouldn't work.

    Quote Originally Posted by RyanReese View Post
    but not into the DOM (it can't be recognized there)) are supposed to be ignored by UA's
    Could you back up this statement?
    Simon Pieters

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Could you back up this statement?
    Which part? That it isn't recognized in the DOM or that empty elements are supposed to be ignored by UA's

    The first part-just try some tests. I remember it being inaccesssible

    Second part-it's on W3's site. I did a quick glance over there on possible pages but I don't want to spend my entire evening combing through their site. I remember reading it on there however.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    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)
    Yea the trick allows for Opera to do vertical ersizing and by nature that is a rendering fault.
    Yeah, I know all about Opera's redrawing bug and the various fixes that work.

    Quote Originally Posted by zcorpan View Post
    Why would it not be shown? Surely it should be shown just like any other :before box?

    I see the red float in Firefox and Safari, too.

    The wrong behavior in Opera is that without the float, Opera doesn't reflow when the window is resized. Showing the float is correct behavior.
    I see it in Safari and it is showing the content div as solid green just like Opera but I don't see FF(3.0.11) doing this, nor IE8.

    As I mentioned above I am aware of Opera's redrawing issues and that is the reason for the :before float which was developed in the Sticky Footer Quiz.

    So now safari is doing the same thing as Opera and I am not seeing the float at 20px x 100% in FF3.

    Here is the live code from above
    http://www.css-lab.com/test/stickfoot-test.html

    zcorpan, which version of FF are you using?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm using FF3.5 and I saw it originally though I misinterpreted your original q.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    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)
    Ok, I see why my AP Example from post #1 is working, I floated the #content div which allowed it to clear the :before float.

    I'm just trying nail this down and figure out which browser's are rendering this body:before float properly. That is the whole point of this thread, so I guess I'm still looking for a definitive yes or no on who is right and wrong.

    The only way FF3 or IE8 will show the float is with generated content as shown below but I don't get 100&#37; height.

    Code:
    body:before {/*Opera min-height 100% Fix*/
        content:"float";
        height:100%;
        float:left;
        width:20px;/*reset to zero after Opera testing*/
        background:red;/*just for testing with width*/
    }

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I believe tha tit is only showing because otherwise the content is nothing thus an empty element and that reverts back to my statement about UA's supposed to ignore empty elements. I know I read that somewhere on w3.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Which part? That it isn't recognized in the DOM or that empty elements are supposed to be ignored by UA's
    The second part.

    Quote Originally Posted by RyanReese View Post
    Second part-it's on W3's site. I did a quick glance over there on possible pages but I don't want to spend my entire evening combing through their site. I remember reading it on there however.
    The HTML4 spec says that UAs should ignore empty P elements. However that's quite irrelevant here.

    CSS21 says that a static block box with no padding, no border, and auto height and no content will have margins collapse through it.

    I don't know of anything that says that a floated empty box with specified dimensions should be ignored.

    Quote Originally Posted by Rayzur View Post
    zcorpan, which version of FF are you using?
    Trunk.
    Simon Pieters

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=zcorpan;4376363]
    The HTML4 spec says that UAs should ignore empty P elements. However that's quite irrelevant here./QUOTE]

    I know that it said elements in general-not just <p> elements. I don't know whether floats would affect that though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    FF3 is buggy with the :before and :after pseudo elements which is why you are not seeing a 100&#37; high float. FF3.5 shows it the same as safari and opera which is as it should be. They fixed those pseudo classes in FF 3.5

    For the sticky footer Firefox 3 doesn't need the before float anyway. It's only to cure the opera resize bug (as you know).

    I've found in the past that the absolutely positioned footer breaks in ie6/7 when dynamic content is inserted or a hide and show takes place in the content. I just tested on your layout with a quick hide and show and it seemed to work ok but I would suggest you test with a bit more content and a few floats in the layout.

    If you use the negative footer method then you can always set a negative bottom margin on the :before float also. I like the border on the header method as it fixes the problem at the start but in effect its the same difference as adding padding to the bottom of the content to protect the footer.

  15. #15
    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)
    Hi Paul,
    After setting up another Test Case and reading through the specs I came to the conclusion that Opera was correct in it's display of the :before float.

    I assumed that the problem in FF was fixed in 3.5 after hearing that it behaved as Opera, though I had not confirmed that yet so thanks for the link.

    As far as the AP footer I was not aware of the potential problems you mentioned with ie6/7. I'm not trying to reinvent the wheel here I was looking for a way to eliminate the extra inner div that was needed to clear the :before float. But with the problem resolved in FF3.5 it will need the extra div just like Opera and safari does. It seems to be the best solution as it is definitely needed when using the :before float.

  16. #16
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray, I see you want to loose the extra inner div needed for content elements not to clear the pseudo element.

    Just a thought; Paul mentioned a negative margin on the pseudo element to allow the cleared footer to go up. Have you tried cancel out the pseudo element's whole effect on cleared elements by a very large negative top or bottom margin on it? Like:
    Code:
    body:before {
    	float:left;
    	margin-top:-9999em;
    	width:0;
    	height:100&#37;;
    	content:" ";
    }
    Maybe that could make the inner div unnecessary?

    Sorry I can't yet test myself if this could have any side effects in a real layout.
    Happy ADD/ADHD with Asperger's

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

    That's a very good idea and we could actually use margin-bottom:-100&#37; instead to always maintain the correct zero impact.


    Code:
    body:before {/*Opera min-height 100% Fix*/
        content:"";
        height:100%;
        float:left;
        width:20px;/*reset to zero after Opera testing*/
        background:red;/*just for testing with width*/
        margin-bottom:-100%;
    }
    I've tested in opera and it still seems to allow the window to be resized while negating the effect of the float for cleared elements.

    Probably needs a little more testing but I think that it will work and reduce the need for the float containment

    Edit:


    I updated my example and it seems to work well Thanks Erik

  18. #18
    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)
    Sorry I can't yet test myself if this could have any side effects in a real layout.
    The Negative-Margin-Master strikes again

    Hi Erik,
    I just updated my Live Code with your suggestion and it looks promising as I see no redrawing problem in Opera while using it. Will test further but it appears fine in Opera and Safari, perhaps someone with FF3.5 can take a look at it for me.

  19. #19
    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)
    LOL Paul!
    We both ran tests and reported back within a minute of each other.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post
    LOL Paul!
    We both ran tests and reported back within a minute of each other.


    I've just run some tests in FF3.5 and your one is fine using the top negative margin.

    The negative bottom margin works but of course as margins are based on the width of the element it means that if the page is squashed the margin doesn't reach all the way up.

    Therefore the measurement can't be a percentage value so a 999em negative top or bottom margin will be best ( or use operas pixel limit which I forget off the top of my head - safari is 32767px IIRC). You have to be careful with 9999em as that may break the limit.

    This will be useful in bringing the html back to the original mark up and no extra divs needed

  21. #21
    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)
    You have to be careful with 9999em as that may break the limit.
    Oh yes, I think Opera has a negative margin limit of 32695px and setting it right below the limit is usually safer.

    If I remember correctly even 999em can cause problems when large font sizes are added into the mix.
    (though font-size should not matter in this case as it is not declared)

    Thanks for everyone's input in this thread and thanks for the easy fix Erik!

  22. #22
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    ... or use operas pixel limit which I forget off the top of my head - safari is 32767px IIRC). You have to be careful with 9999em as that may break the limit.
    That scroll limit slipped my mind!

    Quote Originally Posted by Rayzur
    Oh yes, I think Opera has a negative margin limit of 32695px and setting it right below the limit is usually safer.
    As Paul already said, it is 32767px.

    But the +1px breaking number is extended by the thickness of the appearing crossing scroll bar, usually 17px.
    Happy ADD/ADHD with Asperger's

  23. #23
    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 Erik J View Post
    As Paul already said, it is 32767px.

    But the +1px breaking number is extended by the thickness of the appearing crossing scroll bar, usually 17px.
    Ah, Ok

    I remember you sent me a PM several months ago about this Side Scroll Gallery and suggested that I remove the -999em and replace it with -30000px.

    I left your comments in the css at the time, that's what I was basing my info on.

    Code:
    #inner-wrap {
        float:left;
        margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
        padding-left:20px;
    }

  24. #24
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for changing the value in your demo half a year ago!

    I was not quite sure of the precise value at the time (I hope I did put an approximate sign before the number). Checking my later test files again I must say the precise value before breaking is actually 32768px. Wich also was what Raffles suggested in the discussion as it is 2 raised by 15.

    What confused in various tests at the time was the influence of the crossing vertical scrollbar. It's thickness adds to the safe value.

    Now I checked Opera 10 regarding vertical margins, and I see no influence on the vertical margin limit by the eventual horizontal scrollbar.

    In Opera the value -32768px on the before element is the "safe" limit in cancelling out the clearing. And a greater single vertical margin does not seem to break anything. I say single because a combined top and bottom margin greater than -32768px does break the cancelling effect.

    Checking Safari 4 it seems to not have this limit, at least not on the vertical margin.

    And I'm very happy to contribute!
    Happy ADD/ADHD with Asperger's

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I must say the precise value before breaking is actually 32768px.
    It looks like it would be 32767px on the following test Erik.

    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=utf-8" />
    <title>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0
    }
    #test {
        height:32867px;
        margin-top:-32768px;
        width:100px;
        background:red;
    }
    </style>
    </head>
    <body>
    <div id="test">test</div>
    </body>
    </html>
    There should be 100px of the red block showing but in Opera the whole 32867px is visible and stretches for miles down the page.

    If you reduce it by 1px to 32767px then opera just shows 100px of the bottom as do other browsers (Safari4 and chrome 2 seems ok).

    However when used in the sticky footer code on the body using the before element it seems that any larger value still works so it seems that there is no danger of breaking.


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
  •