Sticky Footer doesn't work well on Safari and Chrome?

I recommend trying a CSS only solution link That will work on browsers with disabled javascript.

I recommend trying a CSS only solution link. That will work on browsers with disabled javascript.

As I mentioned on my post... I tried that one, but it is not working for me. I don't know if using . NET / IIS has to do with the interpretation of the codes... but I've had to design for .

NET apps and it is a pain. It's way easier when I do work for php/mysql apps, way way easier. – UXdesigner Jul 8 '10 at 15:44 HTML / CSS / JavaScript is client side, the server side language makes no difference if the client side code is the same.

– Chris Diver Jul 8 '10 at 15:48 I too recommend using a CSS solution. Our website uses the "sticky footer" ability and it works on every browser we've tried. Infinitas.Ws - just break apart the source code to see what we did.

– Chase Florell Jul 8 '10 at 15:53 I don't know what's so special about this . Net project that everything I know is wrong. Designing this project was painful, it works pretty well, except for thefooter in SAFARI and Chrome.

Firefox and IE works wonders. Did you see the sticky footer im using? Is there something I could add to it to let it work well in the other browsers for some reason?

– UXdesigner Jul 8 '10 at 16:11 check out my answer for a little push in the right direction. Some minor CSS modifications and you "should" be off to the races. – Chase Florell Jul 8 '10 at 16:16.

Here's how we've done our CSS ONLY solution Markup CSS /*General Site Design*/ body { margin: 0; } #wrapper { width: 900px; /*same width as w\idth inside "outer" element*/ } #header { height: 63px; } #menu { width: 798px; height: 20px; margin-left: 50px; } #main { width: 780px; margin-left: 60px; margin-top: 20px; min-height: 100%; height: 100%; background-color: #FFFFFF; } /*Footer Layout*/ #clearfooter { height: 75px; /*same as footer height*/ } #footer { width: 900px; height: 75px; background-image: url(Images/Footer_bg. Gif); margin: -75px auto 0; /*opposite px to height*/ z-index:10; } . Footer { padding-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; width: 800px; }.

Notice how the "footer" is outside of the "wrapper". Essentially it's a completely separate element outside of the rest of the layout. – Chase Florell Jul 8 '10 at 16:19.

Markup Sticky Footer css #footer { height: 100px; } script // Window load event used just in case window height is dependant upon images $(window). Bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); function positionFooter() { footerHeight = $footer.height(); footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; if ( ($(document. Body).height()+footerHeight) Css({ position: "static" }) } } $(window) .

Scroll(positionFooter) . Resize(positionFooter) }); DEMO LINK.

That one is really cool, but the Footer 'moves' and I don't want it to 'move' or slide whenever I'm moving the page, that is wrong! – UXdesigner Jul 8 '10 at 15:42 but that's the whole reason for using a JS style sticky footer... so that it moves as you scroll. If you want a fixed footer, then you go purely CSS – Chase Florell Jul 8 '10 at 15:54 A pure CSS solution is in my other answer.

– Chase Florell Jul 8 '10 at 16:09.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions