Re: [css-d] Footer placement in FF - FIXED!
Thanks Chetan! It worked! (I think -- still a little funky in Browserlab, but it looks great in FF4 windows in Parallels on my mac.) http://www.lankforddesign.com/ On Apr 28, 2011, at 11:58 PM, Chetan Crasta wrote: On Fri, Apr 29, 2011 at 12:04 PM, Steve Caramia > wrote: This worked: http://www.duclauddesign.com/ This doesn't: http://www.lankforddesign.com/ Both pages have problems, and not just in Firefox. When the browser window height is around 600px the layout breaks. For a sticky footer (footer that stays at the bottom), try the technique described here: http://www.cssstickyfooter.com/using-sticky-footer-code.html Regards, Chetan Crasta ¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡! CARAMIA DESIGN 510.525.4525 caramiadesign.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] Footer placement in FF - FIXED!
Great! Thanks for cleaning up my code. I'm a little confused, though.
The Sticky Footer page specifically says NOT to add margin values on
the top and bottom.
Using top and bottom margins inside some elements may push your footer
down by that margin height, perhaps in a header or the wrap or main
's themselves. Instead use padding to create spacing inside the
element. You'll notice this is happening if your page has little
content so that the footer should be on the bottom but you see that
your window scroll bar on the side indicates that it is sitting a bit
below the window bottom. Go find the offending top or bottom margin
and switch it to padding.
But it looks good now!
http://www.lankforddesign.com/
On Apr 29, 2011, at 12:28 PM, Chetan Crasta wrote:
Happy to help. There are some minor problems with the CSS. I suggest
you do this:
#nav {display:block; height:60px; margin: 40px auto 0; width: 725px; }
#content {
background-color: #FFFBEA;
border-color: #DFDFDF #99 #66 #CC;
border-style: solid;
border-width: 1px;
margin: 60px auto 40px;
padding: 0;
width: 700px;
}
position:relative should be rarely used because it can cause problems.
Also, ccing your emails to the list is a good idea because it may help
someone else who has a similar problem.
Regards,
Chetan Crasta
On Sat, Apr 30, 2011 at 12:23 AM, Steve Caramia > wrote:
Thanks Chetan! It worked! (I think -- still a little funky in
Browserlab,
but it looks great in FF4 windows in Parallels on my mac.)
http://www.lankforddesign.com/
On Apr 28, 2011, at 11:58 PM, Chetan Crasta wrote:
On Fri, Apr 29, 2011 at 12:04 PM, Steve Caramia >
wrote:
This worked: http://www.duclauddesign.com/
This doesn't: http://www.lankforddesign.com/
Both pages have problems, and not just in Firefox. When the browser
window height is around 600px the layout breaks.
For a sticky footer (footer that stays at the bottom), try the
technique described here:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Regards,
Chetan Crasta
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.com
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?
¡!
¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!¿?¡!
CARAMIA DESIGN 510.525.4525 caramiadesign.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] Footer placement in FF - FIXED!
On Sat, Apr 30, 2011 at 2:19 AM, Steve Caramia wrote: > Great! Thanks for cleaning up my code. I'm a little confused, though. The > Sticky Footer page specifically says NOT to add margin values on the top and > bottom. In this case, it does not cause any problems. It works correctly in IE 7, IE 8, Chrome, Safari and Firefox. Regards, Chetan Crasta __ 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] Footer placement in FF - FIXED!
On 30/04/2011 6:49 AM, Steve Caramia wrote:
Great! Thanks for cleaning up my code. I'm a little confused, though.
The Sticky Footer page specifically says NOT to add margin values on the
top and bottom.
If the div#wrap has overflow: hidden, then you can have child elements
with vertical margins. The div#wrap itself can not have vertical margins.
Using top and bottom margins inside some elements may push your footer
down by that margin height, perhaps in a header or the wrap or main
's themselves.
See above.
Instead use padding to create spacing inside the
element. You'll notice this is happening if your page has little content
so that the footer should be on the bottom but you see that your window
scroll bar on the side indicates that it is sitting a bit below the
window bottom. Go find the offending top or bottom margin and switch it
to padding.
But it looks good now!
http://www.lankforddesign.com/
It still not a sticky footer. It's a footer that it always fixed at the
bottom of the viewport. To get this variant of footerStickAlt to work as
a sticky footer, change this CSS,
wrap {width: 960px;margin: 0 auto; min-height: 100%; }
^-- Note no # in your CSS.
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear:both;
background:url(images_site/bg_footer.jpg) bottom repeat-x;
position:fixed; /* NOTE This causes the footer to be fixed in-respect
to the viewport */
height:120px;
/* width:100%; DELETE block elements are always 100% in width */
bottom: 0px; /* NOTE This is the offset that the footer has from the
bottom of the viewport */
/* display: block; DELETE block-level elements are always displayed as
blocks */
overflow:hidden;
}
to this CSS.
#wrap {
width: 960px;
margin: 0 auto;
min-height: 100%;
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
#footer {
position: relative;
margin-top: -120px; /* negative value of footer height */
clear: both; /* this is needed if there is floating content such as a
side bar, safe to keep there */
background: url(images_site/bg_footer.jpg) bottom repeat-x;
border-bottom: 1px solid red; /* for testing, remove and adjust
height of footer */
height: 119px; /* for testing, remove and adjust height of footer to
height: 120px */
overflow: hidden; /* not needed if child elements don't have vertical
margins that can collapse into this element, safe to keep there */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.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] Footer placement in FF - FIXED!
On Sat, Apr 30, 2011 at 2:06 PM, Alan Gresley wrote:
> It still not a sticky footer. It's a footer that it always fixed at the
> bottom of the viewport. To get this variant of footerStickAlt to work as a
> sticky footer, change this CSS,
>
That's right! I didn't notice it earlier.
In addition to the changes you suggested, here are some changes:
html, body {height: 100%;}
The article suggests this:
