Re: [css-d] sticky footer position in IE - bottom of window instead of page
Am I right? I'm asking, not proclaiming.
Code like this is perhaps useful because it solves a problem. But it's a
hard-coded hack relying on unintended side effects and more likely than not
to sometime break in the future. More likely than more standard codes that
don't exploit side effects (negative margins and hard-coded pixels etc)
It relies on hard-coding and coupling footer-height in pixels to codes
relating to the page-wrap block, that in a better world would be modular
and independent. And not so tightly coupled. There must be a better way.
I'll have to read through the entire thread to see what other solutions
there are. I do it with fixed positioning on my little (amateur) website.
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
On Sat, Nov 8, 2014 at 5:06 PM, Debbie Campbell d...@redkitecreative.com
wrote:
I stripped out all the sticky footer code and tried a few other methods,
this one worked and tested down to IE8 with no problems:
http://css-tricks.com/snippets/css/sticky-footer/
The footer is now where it should be. Thank you for your input everyone.
http://www.redkitecreative.com/dev/boisson/
Also I fixed the :focus state for links, thanks for that too.
--
Debbie
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
/* Colin (Sandy) Pittendrigh --oO0 */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
It may just be early here but if the content is deeper than the current
viewport, this will cause problems. Also I don't see how this is sticky.
Sent from my iPhone
On Nov 9, 2014, at 9:49 AM, Colin (Sandy) Pittendrigh
sandy.pittendr...@gmail.com wrote:
Am I right? I'm asking, not proclaiming.
Code like this is perhaps useful because it solves a problem. But it's a
hard-coded hack relying on unintended side effects and more likely than not
to sometime break in the future. More likely than more standard codes that
don't exploit side effects (negative margins and hard-coded pixels etc)
It relies on hard-coding and coupling footer-height in pixels to codes
relating to the page-wrap block, that in a better world would be modular
and independent. And not so tightly coupled. There must be a better way.
I'll have to read through the entire thread to see what other solutions
there are. I do it with fixed positioning on my little (amateur) website.
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
On Sat, Nov 8, 2014 at 5:06 PM, Debbie Campbell d...@redkitecreative.com
wrote:
I stripped out all the sticky footer code and tried a few other methods,
this one worked and tested down to IE8 with no problems:
http://css-tricks.com/snippets/css/sticky-footer/
The footer is now where it should be. Thank you for your input everyone.
http://www.redkitecreative.com/dev/boisson/
Also I fixed the :focus state for links, thanks for that too.
--
Debbie
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
/* Colin (Sandy) Pittendrigh --oO0 */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
Le 8 nov. 2014 à 12:04, Debbie Campbell d...@redkitecreative.com a écrit :
It's showing up in the middle of the content instead of at the very bottom
in IE 11.
Having seen a couple screenshots of IE10/11 it appears to me that
1. on initial page load, the footer is positioned at the bottom of the viewport
(not the bottom of the content)
2. the footer scrolls with the page as if IE treats `min-height:100%` on the
root element as `height: 100%`.
Does it help if you set a min-height for body (shot in the dark and hackish)?
body { min-height: calc(100% - 40px); /* where 40px is the height of the
bottom-margin */ }
That shouldn’t do anything, but who knows what is going on in IE’s twisted mind
today…
BTW you should do something about the focus state for links. At present the
poor keyboard user is plain lost.
a:focus { outline: none } is plain evil without a suitable replacement.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
I stripped out all the sticky footer code and tried a few other methods, this one worked and tested down to IE8 with no problems: http://css-tricks.com/snippets/css/sticky-footer/ The footer is now where it should be. Thank you for your input everyone. http://www.redkitecreative.com/dev/boisson/ Also I fixed the :focus state for links, thanks for that too. -- Debbie __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] sticky footer position in IE - bottom of window instead of page
Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
Not working in ios8.1 safari either. Just sits at the bottom of the content. Sent from my iPhone On Nov 7, 2014, at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
On Fri, Nov 7, 2014 at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell Are you working on this? I am not seeing a sticky footer in any browser. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer position in IE - bottom of window instead of page
I don’t know what your expectations are but given your code, your footer will always position itself at the bottom of the content when the page is longer than the height of the viewport (as in the sample page you link to) and will be positioned at the bottom of the viewport if there is little or no content on the page. (hint: use the developer tools of your browser to set #container to display: none and you’ll see this in action) Yes I see this, it's working fine in IE 11 with #container = display:none; Now what IE 11 is doing I don’t know (not available on this machine); based on your description, it isn’t doing what I describe above, though. Sounds like it interprets your set up as `position: fixed`. It's showing up in the middle of the content instead of at the very bottom in IE 11. -- Debbie __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
