Re: [css-d] how to keep footers at the bottom
Thanks again all, I've got it working now, seems fairly rock solid as long as I don't resize the browser window violently. Woohoo. - Ben On 2/21/06, Tom Payne <[EMAIL PROTECTED]> wrote: > Ask the Man in Blue > > http://www.themaninblue.com/writing/perspective/2005/08/29/ > > :) > > On 21 Feb 2006, at 15:38, Ben Liu wrote: > > > Thanks Jim, > > > > That's an interesting solution. I'm discussing it with the designer > > right now. We prefer to keep the footer pinned to the bottom and > > having the entire page scroll rather than the center content, however, > > we may need to consider it if we cannot find a solution exactly as we > > desire. > > > > - Ben > > > > On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote: > >> Ben, > >> > >> See this demo for a possible solution: > >> > >> http://www.456bereastreet.com/lab/cssframes/ > >> > >> Jim > >> > >> > >> On 2/21/06, Ben Liu <[EMAIL PROTECTED]> wrote: > >>> Thanks in advance for any help. I'm trying to create a site that > >>> requires a horizontally stretching footer that is pinned to the > >>> bottom > >>> of the browser port. T > >> > >> > > __ > > css-discuss [EMAIL PROTECTED] > > http://www.css-discuss.org/mailman/listinfo/css-d > > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
I've implemented the "man-in-blue" footerStickAlt technique on my test
site and it seems to work quite well in Safari, IE5.5/6, breaks in
IE7beta2 as expected. However, on my test site homepage
(http://dev.gelatincube.com/gcpsiro/index.php) I use absolute
positioning on the main content area to create two columns. On this
particular page, the technique breaks. So I guess I might have to
position the two columns relatively and float them to achieve two
columns and then make the footer clear both floats. Gonna try that
now. Solution seems close at hand, thanks to all.
- Ben
On 2/21/06, cj <[EMAIL PROTECTED]> wrote:
> the best footer solution i've seen is from
> http://www.themaninblue.com/experiment/footerStickAlt/ and doesn't
> require absolute positioning. make sure you view *his* examples,
> which are the bottom two he lists ("Alt"). the first two show the
> footer code he started from, which was buggy.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
Hi cj,
This looks more like what I need. Absolute positioning never seemed
entirely "ready for primetime" to me, especially due to spotty browser
implementation. I'll take a crack at my site using this technique and
post back.
- Ben
On 2/21/06, cj <[EMAIL PROTECTED]> wrote:
> the best footer solution i've seen is from
> http://www.themaninblue.com/experiment/footerStickAlt/ and doesn't
> require absolute positioning. make sure you view *his* examples,
> which are the bottom two he lists ("Alt"). the first two show the
> footer code he started from, which was buggy.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
Thanks Mark, I'm looking into this now. Appears to be similar to the suggested site Jim referenced, just with some IE specific javascript in the CSS. - Ben On 2/21/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > Ben, > > Try this page as well. http://www.fu2k.org/alex/css/frames/ > Alex has done a lot more playing with this and helped me solve a problem > that Roger's didn't address. > > -- > Marc Luzietti > Flagship Project > Bayview Financial, L.P. > (305) 341-5624 > > > > > > "Ben Liu" <[EMAIL PROTECTED]> > Sent by: [EMAIL PROTECTED] > > 02/21/2006 10:38 AM > > To:"Jim Davis" <[EMAIL PROTECTED]> > cc:css-d@lists.css-discuss.org > Subject:Re: [css-d] how to keep footers at the bottom > > > Thanks Jim, > > That's an interesting solution. I'm discussing it with the designer > right now. We prefer to keep the footer pinned to the bottom and > having the entire page scroll rather than the center content, however, > we may need to consider it if we cannot find a solution exactly as we > desire. > > - Ben > > On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote: > > Ben, > > > > See this demo for a possible solution: > > > > http://www.456bereastreet.com/lab/cssframes/ > > > > Jim > > > > > > On 2/21/06, Ben Liu <[EMAIL PROTECTED]> wrote: > > > Thanks in advance for any help. I'm trying to create a site that > > > requires a horizontally stretching footer that is pinned to the bottom > > > of the browser port. T > > > > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
Thanks Jim, I see how that now allows the header to scroll with the
rest of the page. However, the footer is still not behaving exactly as
we would like. It is seems to be a working solution, but wow, with a
lot of hacks though.
- Ben
On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote:
> Ben,
>
> Just change one line:
>
> /* position:fixed for modern browsers - header and footer do not scroll */
> body>div#headerwrap {
> position:absolute;<--- change from fixed to absolute
>
>
> Jim
> On 2/21/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> > Thanks Jim,
> >
> > That's an interesting solution. I'm discussing it with the designer
> > right now. We prefer to keep the footer pinned to the bottom and
> > having the entire page scroll rather than the center content, however,
> > we may need to consider it if we cannot find a solution exactly as we
> > desire.
> >
> > - Ben
> >
> > On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote:
> > > Ben,
> > >
> > > See this demo for a possible solution:
> > >
> > > http://www.456bereastreet.com/lab/cssframes/
> > >
> > > Jim
> > >
> > >
> > > On 2/21/06, Ben Liu < [EMAIL PROTECTED]> wrote:
> > > > Thanks in advance for any help. I'm trying to create a site that
> > > > requires a horizontally stretching footer that is pinned to the bottom
> > > > of the browser port. T
> > >
> > >
> >
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
the best footer solution i've seen is from
http://www.themaninblue.com/experiment/footerStickAlt/ and doesn't
require absolute positioning. make sure you view *his* examples,
which are the bottom two he lists ("Alt"). the first two show the
footer code he started from, which was buggy.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
Ben,
Try this page as well. http://www.fu2k.org/alex/css/frames/
Alex has done a lot more playing with this and helped me solve a problem
that Roger's didn't address.
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
"Ben Liu" <[EMAIL PROTECTED]>
Sent by: [EMAIL PROTECTED]
02/21/2006 10:38 AM
To: "Jim Davis" <[EMAIL PROTECTED]>
cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] how to keep footers at the bottom
Thanks Jim,
That's an interesting solution. I'm discussing it with the designer
right now. We prefer to keep the footer pinned to the bottom and
having the entire page scroll rather than the center content, however,
we may need to consider it if we cannot find a solution exactly as we
desire.
- Ben
On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote:
> Ben,
>
> See this demo for a possible solution:
>
> http://www.456bereastreet.com/lab/cssframes/
>
> Jim
>
>
> On 2/21/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> > Thanks in advance for any help. I'm trying to create a site that
> > requires a horizontally stretching footer that is pinned to the bottom
> > of the browser port. T
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to keep footers at the bottom
Thanks Jim, That's an interesting solution. I'm discussing it with the designer right now. We prefer to keep the footer pinned to the bottom and having the entire page scroll rather than the center content, however, we may need to consider it if we cannot find a solution exactly as we desire. - Ben On 2/21/06, Jim Davis <[EMAIL PROTECTED]> wrote: > Ben, > > See this demo for a possible solution: > > http://www.456bereastreet.com/lab/cssframes/ > > Jim > > > On 2/21/06, Ben Liu <[EMAIL PROTECTED]> wrote: > > Thanks in advance for any help. I'm trying to create a site that > > requires a horizontally stretching footer that is pinned to the bottom > > of the browser port. T > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] how to keep footers at the bottom
Thanks in advance for any help. I'm trying to create a site that requires a horizontally stretching footer that is pinned to the bottom of the browser port. This I understand is a common issue in CSS design when a tables-based layout is not used. I referenced the article "Exploring Footers" by Bobby Van Der Sluis on alistapart.com and found the information useful, but I was still coming up with some bugs. Specifically, certain pages still sometimes render with the footer not pinned to the bottom but rather somewhere in the middle of the content, overrunning other content on the page. It doesn't do it consistently, mostly when you resize the browser window and then click to a page already visited, its as if the browser cache thinks the browser is still the former size and resolves the site based on that previous size. The test site is here: http://dev.gelatincube.com/gcpsiro/ Style sheet is here- http://dev.gelatincube.com/gcpsiro/common/master.css A screenshot of the problem is available here- http://dev.gelatincube.com/gcpsiro/img/fubarfooter.jpg The site uses an absolute positioned (bottom: 0) footer inside a relative positioned container item (#container). It works most of the time in Safari 2, Firefox 1.5, IE6. It fails in older versions of Firefox (1.01) and predictably in IE7Beta2 I guess because of the overflow: visible fix and lack of support for min-height. It also fails in IE5/5.5 because I did not bother to hack for those browsers. My goal here is to make this footer work 100% of the time in IE6, Safari 2 and Firefox 1.5. Again, thanks for any help. - Ben __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
