Demiscient Posted October 20, 2011 Share Posted October 20, 2011 I've tried multiple tutorials on the net. At least 8 of them (and that's quite a lot of different ways to accomplish something that shouldn't be this damned hard in the first place!) and they don't work for my web app. I don't know whether to post this in the jquery section, the css section, the html section, or all three, because I don't know where the problem is. http://endemicdesigns.com/ As you can see, the footer is still floating somewhere midway up the page (for me anyways, it depends how big your monitor is I guess). I am assuming none of the above fixes work because there is either something clashing in the jquery mobile css I have been given... or because the pages are all in one single html file (so that on mobile phones, when you click to go to the next page, it slides across to the next one instead of reloading). Either way, I don't know what the problem is and I don't know how to fix it. If anyone has developed a web app and successfully shoved the footer to the bottom of the page, I'd love to know how you did it because it's driving me batty! Demi Link to comment Share on other sites More sharing options...
Don E Posted October 20, 2011 Share Posted October 20, 2011 Well from the looks of it, it could be because the content is not taking up the available height of the browser/screen. Try giving your content area(s) a fixed height and see if your footer is pushed down. If its pushed too down, you'll most likely get the vertical scroll bars on the side. Fixed height really isn't a good idea anyway because your content maybe bigger or may expand to get bigger than the specified height. But for testing purposes you can give it a try. However, if you know your height is going to be the same for all pages, meaning it won't expand to get bigger, than yeah you can make it a fixed height. Other than that, I don't know what it could be... Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Thanks Don, but unfortunately I can't have it a specific, fixed height because different phones will have larger resolutions etc =\ Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 There's a technique called "sticky footer." The idea is to have a wrapper around all your content, and have the footer outside of the wrapper. The wrapper is given 100% height (the <html> and <body> elements too) and the footer is given a negative top margin equal to its height. Inside the wrapper, right at the bottom, is an empty element that's equally as tall as the footer. HTML: <div id="wrapper"> Content goes here. <div class="padding"></div></div><div id="footer">Footer</div> CSS: html,body { margin: 0; padding: 0; height: 100%;}#wrapper { min-height: 100%;}#footer { height: 80px; margin-top: -80px;}.padding { height: 80px;} Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 I thought that technique was familiar--it doesn't work. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 What? it does, I just tried something very similar with padding applied to wrapper container using FF firebug, and that worked fine. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 It may work on normal websites, but for some reason when I applied it to mine, it didn't? I'll re-upload the new code to the server. Maybe I'm doing something wrong Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 I don't see any case where it wouldn't work, can you show an example of your implementation? Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Okay, I've re-uploaded it with the code added (but only applied it to the first page). I changed "footer" to "footing" in both the css and the html because I was worried there would be something conflicting in the other css file. edit: You can see it in action at the original address. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 the<div id="Persnickety"> is you wrapper element the <div id="footing"> must be outside the wrapper element closing div tag <div id="Persnickety">rest of elements</div><div id="footing"></div> Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 I can't change the persnickety wrapper element to end before the footer because the site breaks and the footer vanishes--but somehow leaves a shadow in the place where it used to be that extends from midway up the page (roughly) to the very bottom of the page. edit: I reuploaded to show you what I mean. Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 The problem is that you have "position: absolute" on your wrapper. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Sorry but... I removed the positioning from the code, and the footer still isn't going down. Reuploaded. It's impossible, just say it and put me out of my misery Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 When I removed the absolute positioning from your code, the footer was working just fine. The problem is that you've put the footer inside the "Persnickety" element again. Keep it outside. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Okay. Okay. I've edited and reuploaded again. I feel like I'm unintentionally trolling you when I say this but I can't get it to work. I've closed off the Persnickety div before the footer. I've removed the absolute positioning. I've given the footer the id of "footing". And the CSS has remained the same (asides from removing the aboslute positioning). Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 Your "Persnickety" element has a min-height in the style attribute that shouldn't be there. And, I also made a mistake in my earlier code. The #Persnickety element shouldn't have a height property, but a min-height property of 100% Adding overflow: hidden; to the footing will prevent the margins of the <h4> element from pushing the fotting further down than it should be. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Reuploaded.. You should know I'm borderline between laughing my head off and bursting into tears here. Changing the property to min-height instead of height doesn't do anything different from what I can visibly percieve, regardless of whether I additionally use Firebug to disable the style.element's min-height of some random number. I can't get rid of it in the code because it's not actually written anywhere in the code.. edit: And the footer still isn't displaying. Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2011 Share Posted October 20, 2011 The footer text seems to be at the bottom now. All you need to do is add some background color and style to the #footing element. Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 Oh jeez. The footer was perfectly styled before I started messing with code to push it down, is there not a way to just push it to the bottom without having to style it AGAIN? Not only that but there's still an everpresent shadow looming (literally, looming) that starts at the bottom of the content and stretches to the bottom of the page. Thanks for your help and I don't want to seem ungrateful that you've stayed here to guide me through your method, but I've already spent hours trying to interpret your instructions and I'm not going to on top of that spend hours trying to redo the footer styling from various different sections of the code in the three different CSS files that are styling the site, figure out why the gradient in the background is suddenly sitting on top of the bottom half of the screen, and try and get rid of the 10px high block of white nothingness that is now sitting at the bottom of my page. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 All you have to do is replace the temp "footing" element with original you had so the styling for that will return. you can force the overwriting of the min-height styling by using !important, and comment out the border, but the background image does not seem to tile correctly #Persnickety {min-height: 100% !important;}.ui-body-b {background-image: url("bg.png"), -moz-linear-gradient(center top , #B7ADC4, #DFD7ED);/*border: 1px solid #C6C6C6;*/color: #333333;font-weight: normal;text-shadow: 0 1px 0 #FFFFFF;} Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 the original #footer just requires margin-top:-46px #footer {margin-top:-46px} Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 I believe I'd rather jump in a lake ( Filled with bears. And bees. And bears shooting bees out of their mouth as they chase after you. ) than have any more involvement with trying to fix what is a not-very-well-suited method to my circumstances (or rather my code's circumstances). Lol I'm very sorry but I'm not going to go near the last method with a ten foot barge pole. I don't know enough CSS to be able to fix the million bugs that pop up from that method. I'm probably just going to have to put up with it, unfortunately. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 It's okay, I'm done, seriously done, with trying to do it that way, I mean obviously it doesn't work, it just doesn't. In the past when I've pushed my footers down, it's never broken that badly and I'm sick of trying to fix all the errors that stop the footer from being pushed down. I'm trying to look for a way to do it with Javascript now, but all I see is sticky footers (i.e. the footers that stick to the bottom of the viewpanel like an everpresent toolbar or something), so I'm not having much luck. edit: If I continue to do it that way my stress levels will skyrocket so high that my hair will automatically jump out of their follicles on my head. I am already pretty close to reaching that level already. But! as i far as i know Javascript does not work for mobiles, unless that changed recently? Link to comment Share on other sites More sharing options...
Demiscient Posted October 20, 2011 Author Share Posted October 20, 2011 edit: Omg blargh I just said something idiotic. No I have many lines of Javascript in the head of my html and it works fine on mobiles. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.