Opera body:before float ? (sticky footer)

HTML & CSS
41

Yup, confirmed on my box. Could we speak of a full proof sticky footer ?:smiley: :award:

42

Hi Eric,

As Ray said we already got rid of the IE comments and this is the fullproof version now::slight_smile:

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

Your example will break in a fluid width layout because of the margin-top:-100% you are using.

Margin always refers to the width of the element and therefore if the element is say only 300px wide but the page is 600px high then there will be 300px of the float sticking down into the page. This means that any cleared elements in the content will now jump down the page to clear the float.

We removed the conditional comments a while back after the discussion in the article Ray pointed to :slight_smile:

Apart from the margin error you have basically arrived at the same solution but instead of using after you are using before to get IE8 to recognise the 100% height. :slight_smile:

43

Hi Paul :slight_smile:

Thanks for the explanation. Alright, no biggy, I wasn’t married to it. -100% was sort of temp, thats why I asked my above questions. % margin-top being based on width just doesn’t make any logical sense to me, but I get it now. I’ll just use -999em instead (I couldn’t break Opera with that no matter what i did).

I didn’t realize you guys already trimmed the CC’s out until Ray pointed me to the article. Oh well, I still seemed to of managed to trim it some.

html:before, #wrapper:after {
content:“”;
float:left;
height:100%;
clear:both;
margin-top:-999em;
}

44

Edit - nope- I got to test it more. It resolves the IE8/Opera issue but does not clear floats with the :after, so “as is” there is no real benifit to combining them and using :after (if combining them, mine as well use my original :before). I’ll test play more.

45

Can somebody explain why the display block is needed in the #outer:after declaration?

46

‘clear’ doesn’t apply to inline boxes.

47

Duh!!! :blush:

48

Hello, it’s used to clear any floats, and as an added benifit, it (in part) enables ie8 to redraw the footer. You can use :before also to get ie8 inline, but then you loose the clearing effect. I’m still trying to combine them, however I think it’s a no-go. Now for a sticky footer, we’re up to three extra blocks of code (one for IE6, one for IE8, one for Opera), that doesn’t sit well with me.

49

Yeah, i see your point. What’s troublesome to me is that Opera and IE8 needs extra code. IE6 is no surprise :smiley:

50

Dynamic content hs always been Operas archilles heel, IE8 and Opera are just rendering flaws that we can’t help…IE6 is just…IE6 :slight_smile:

51

I’m a firm believer that Opera will correct that flaw soon :smiley:

52

They have been having redraw problems since it first came out…lol :). If they do fix it soon due to the bug report then that’s excellent :slight_smile:

53

Alright, I’m close again, I just need a way to get rid of the 1% height. Redraws perfect in both and clears any floats. Anything that negates the effect of 1% height makes Opera stop redrawing.

#wrapper:after, body:after {
content:“”;
display:block;
clear:both;
height:1%;
}

54

Hi Eric,

If you are using that instead of your previous rules then it still won’t work in Opera unfortunately (unless you have made other changes not shown). Grab the bottom of the window and move it up and then down to see that it’s not working as expected. This has always been operas main problem.

I explained the issues in the quiz we set which eventually led to the [URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm”]final version.

There are only two real fixes in my code.


/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
}
/* ie8 fix*/
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

In fact I could probably amalgamate those styles into one rules as follows:


/*Opera and IE8 Fix*/
body:before, #outer:after {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
}

[URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table2.htm”]
Example - not stress tested yet.

55

Hello, Ahh… I didn’t notice that it wasn’t coming back up - only looking for it to follow it down. Oh well. Yeah I already amalgamated it here. But then you loose the clearing floats effect, so not better off than just using…

html:before, #wrapper:before {
content:“”;
float:left;
height:100%;
margin-top:-999em;
}

56

But then you loose the clearing floats effect

That’s true for your example but not for the code I just posted.


body:before, #outer:after {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
}

That takes care of all issues.:slight_smile:

57

How? It has no clear both. And even with clear both, I tested the same earlier, and the footer would rise right over the top of any (Edit - floated) text. I’ll assume I’m missing something I guess.

58

Spoke too soon :slight_smile:

I remember why that doesn’t work now because I tried it before and you lose the background colour when the screen is short.

It would still need 2 rules:


/*Opera and IE8 Fix*/
body:before, #outer:after {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
    display:block;
}
#outer:after{
    clear:both;
    float:none;
    margin:0;
}
59

Actually it might work with this but it needs checking again.


/*Opera and IE8 Fix*/
body:before, #outer:after {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* negate effect of float*/
    clear:both;
}
Edit:

No that fails also :wink:

I remember going through all these permutations before which is how I arrived at the two rules I was using