After Googling solutions for this, I'm still at a total loss about a solution here (but at least I found this place . If anyone is able/willing to help pinpoint what i'm doing wrong, i'll put you in my will (such that it is)! I'm having a problem with my footer in two areas: 1) it won't fall to the bottom of the page 2) it won't display properly -- I have an image that i want to display over a repeating bg color. Both show up but not in alignment with each other, or, at the bottom of the page. I've uploaded the files to this url: http://www.easynicheplr.com/help/ - (ignore the domain - this isn't a ad ploy...I have nowhere else to upload it to) - I deliberately don't have an index on this page so you can look at the full css and xhtml files easier. Just click on index1.html to view the problem page and style.css to view the styling. You can see what I mean by the footer not being where it should be, and that it doesn't line up with the expanding footer bg color. I have quadruple-checked that all my divs are ok -- and they are (really). BUT... there is a div that contains the gradient bg for the optin and main header content ...and ends right where the footer begins so, I suspect that it must have something to do with this (?)... Maybe I haven't organized my divs properly (?) but for the life of me, i can't "see" it and am going blind looking for "it." If anyone is willing to have a look, I'd be humbly greatful!!! Please let me know if you need anything else to look at but i think it's all pretty much there at the above url. It's not a fancy site btw but functional. THANKYOU in advance for any help you can offer. I really appreciate your taking the time..! vicky
try to remove the vertical-align: baseline; Code (markup): from your css Else i havent seen anything, but was just able to take a quick look.
Okay had a closer look and supect the following. you have the div "content-bg" from which you call that 270px height bg-image . And you applied a height of 270px to that div which is wrong. the footer comes right after it so it lays over the content. You need to apply hopefully just height: 100%; to the body and #container-bg in the css and remove the 270px from that div. maybe not work on the first try, but thats the problem, so play around a bit p.s maybe it also work if you just remove the 270px, if not try the 100% thingy
hey, Basti...half way there!!!!! i totally missed the height attribute for container-bg (*duh*) so i commented it out (now deleted) and changed the body height to 100% (wasn't even thinking about height in any div!) THANK YOU!!!!! Now... i'm trying to figure out how to get the expandable footer bg color to show up. You don't happen to have any insights on this??? (am still mucking around with it)... THANK YOU!!!!!
I cant iimagine it currently what exactly you mean, do you mean the issue you face is that the blue background from the footer div is smaller in height than the footer image? i see it ( firefox ) but it has a fixed height as well, again this should not have a fixed height to fully expand the bg. - your footer div is smaller in height than your footer content div. + remove the white background from the footer image above the frog and make it transparent or in the color of the bg
a couple of things... 1) i got rid of the height already in the footer div... no change. 2) i can change the transparency of the frog part of the bg image but for now, thought it would help gauge my troubleshooting. (lame, i know. i was also just being lazy For a while, I had forgotten that i moved the main-div to after the footer (I know this is a no-no) and was viewing the uploaded index file with the newly uploaded css, getting different viewing results than my desktop files. Kind of makes troubleshooting a little more difficult :| I've definitely been spending WAY too much time on this! Anyway, now i'm getting the expanded bg color but the bg image isn't lining up with it. I'm going to re-do the transparent footer now and play around with the settings again. Will post an update soon... THANKYOU Basti for your time. You don't know how excited i am to have rec'd constructive help on this..! I really appreciate the extra set of eyes!
ok, i've re-done the footer image ...although because the original image has some effects to it and i didn't feel like re-doing it, the transparency picked up some splotches (brush effects actually). Anyway... i've managed to delete most of the padding settings that interfered with the display. But i'm still not able to center the image. Also, I'm not sure anymore how to prevent the image from changing its height every time i change padding settings (for headings). It wants to compress when i remove all the settings. Suggestions??
to center the hole footer container thingy check your footer container css code and delete the margin left first. instead use margin: 0 auto; Code (markup): which centered the hole thing, so now you also dont need the center tag anymore on the bg-image code then most likely your text is centered, which you dont want so go to #footertext and put this on it text-align: left; Code (markup): As for the conpress, iam to sleepy to solve it currently lol 4:30am if you want pm me ftp details and ill recode it when i wake up
wow.. am feeling pretty daft! I think i've been making so many changes that i'm losing track..! Like you, i have to call it a day and look at this with fresh eyes tomorrow. Unlike you, I can't pull an all-nighter Normally, i love the challenge of troubleshooting my own mistakes but I've really made a mess of this one. Thanks so much for your help -- i'll have to continue this later tomorrow.. cheers!!
UPDATE: I've resolved this problem thx to some help from the forum community (forums are great ). The main problem came from not specifying height 100% in a main content div, as well one of the footer divs, along with a couple of smaller (and obvious) attributes that i became blind too but don't actually remember the details to now. so, thanks very much for taking the time to help me out with this... much appreciated!!