12 replies [Last post]
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey guys, after several days of playing around with footerstickALT, I "thought" that I had finally gotten everything worked out.. I was wrong!

I'm having a small issue right now with a personal website that I'm working on. Honestly, it isn't a large problem, and it really isn't important that I fix it, but it's driving me crazy that I can't figure out the solution.. and even more crazy that I don't understand why it's happening.

Before I get into the issue, this website is only going to be seen by me. It is a "for fun only" project, that will eventually limit the number of websites that I need to have open at any given time. It is only going to be viewed with either IE7 or Firefox as well (the browsers that I use). I will probably test it in others at some point, because I do like to be thorough, but right now I'll be fine when it works in just these two!

Also, the design is a blatant rip off of the footerstickALT example page lol. I liked the design for what I wanted to do, and wasn't feeling very creative, so I remade it in photoshop, and called it a day! :blushing:

tl;dr - The Issue:
The footer is not displaying in the correct position. It IS at the bottom of the page as it should be.. however it is placing it too low on the page. I have the padding on the bottom of the content DIV set to 125px, and the footer itself is 100px in height with a -100px top margin. There should only be a 25px gap between the end of the content DIV, and the footer. There is more than this showing in Firefox.

* I have tried various methods of fixing this, and nothing that I've come up with is working, and/or it breaks the footer layout entirely. From what I can tell, Firefox is placing the 125px below the content and then placing the footer beneath that.. Technically, it's not a very big deal, but I don't understand why it's happening.. and that bothers me.

Does anyone see something simple that I'm missing? I'm still not 100% comfortable with using only CSS for layout, so it's possible that I'm overlooking something simple.

Everything was validated 100% (html & css), so there should be no issues with that.

I do want apologize in advance for the "sloppiness" of the CSS file however.. I'm fairly certain that I've removed anything that I'm no longer referencing in the HTML, however I have been cutting/pasting chunks of code with reckless abandon, so it isn't as organized as I would like.

Thanks in advance for taking the time to look through my code!

HTML: http://www.bdeanguitar.com/
CSS: http://www.bdeanguitar.com/style.css

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

either remove bottom padding

either remove bottom padding from content div or remove top margin from footer. actually there is total of 225px gap between your content div and footer.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

xeeshan wrote:either remove

xeeshan wrote:

either remove bottom padding from content div or remove top margin from footer. actually there is total of 225px gap between your content div and footer.

Hmmm.. I just took another look at everything. If I remove the bottom padding to the content div, then the "footerstickALT" trick would, in essence, cover up part of my content.

The top margin on the footer is set to a negative 100px, because the height of the footer is 100px, and using this method should cause the footer to render below the screen. So, I need the negative margin to bring it back into view. The padding at the bottom of the content div is to prevent the footer from popping up on top of any actual content. If I remove that, on a page that is longer than the browser height, actual content gets cut off.

Unless I'm missing something, I don't think I can remove either of those values.

Thank you for your suggestion though! Please let me know if I'm misunderstanding anything.

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

Hi, I set bottom margin of

Hi,
I set bottom margin of content div to 20px and i can see everything working fine. I am using FireFox and below i have attached screen shot of it.

http://img525.imageshack.us/my.php?image=23705385.jpg

You must be mistaking somewhere else, i will look into it and will let you know.

Thanks,

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I'll have to try that when I

I'll have to try that when I get home (leaving work now).. but did you test that in IE7 as well? If I change the padding, the footer rises up by design. I'll play around a bit more with it later.

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

i will check your code

i will check your code thoroughly and will let you know. have a good time.
c ya

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I just noticed something

I just noticed something when at my girlfriend's house last night.. on short pages (the 'about' or 'blog' test pages), it isn't even working in IE. The website isn't stretching for some reason.. I swear it was when I checked it though.

This is just a personal website, and trying to get this to work is driving me crazy.. I honestly don't understand why everyone is trying to make the switch to CSS.

I'll give this another couple days, but if I can't figure this out, I'm just going to re-write it with tables. :curse:

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

lol. dont loose hope bro.

lol. dont loose hope bro. and dont switch back to tables. blv me i was kind of master in tables but the day i started work in div. my life become so easy.lol ... anyway i will be free tomorrow and day after tomorrow. so i will look into it as well. cheers!!!

PS: hey bro nice collection of bands and singers. all are my fav Smile

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

xeeshan wrote:lol. dont

xeeshan wrote:

lol. dont loose hope bro. and dont switch back to tables. blv me i was kind of master in tables but the day i started work in div. my life become so easy.lol ... anyway i will be free tomorrow and day after tomorrow. so i will look into it as well. cheers!!!

Thanks! I'll keep at it too.. once I start something, it takes a LOT before I give up and quit lol. Part of me is arguing that this website is honestly for my personal use, so just use tables and call it a day, and the other part of me refuses to quit until I get it working with only CSS!

I had another issue with the background image that I fixed, and I'm not curious if that is what's causing the footerstickALT technique to not work in IE. It was definitely working at one point.. I'm thinking when I fixed the other issue (that I didn't post here about), that I may have thrown something else off.

Sometime I'll break everything down, and go through my code again. Or start with the footerstickALT stuff in places with empty divs and then rebuild the site from scratch.. as opposed to adding the footerstickALT code in AFTER the site was already made.

There has to be something small that I'm missing.. but I have been staring at the code for so long, that my eyes are starting to cross, so I'm taking a couple days off!

Thanks for the help sorting it out though.. I appreciate any suggestions you come up with! Smile

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

well yesterday i had a

well yesterday i had a problem and it took 5 hours of mine and you know what, in the end i decided to rebuild my html, but something came into my mind and i put it and my problem got solved. what i was mistaking that i was clearing div from both sides , but i had to do from right side. the reason i couldn't catch the problem as it was showing perfectly fine in IE but in FireFox though layout was coming perfectly as well, but it wasnt showing background only. so ahhhh!! i had a very nasty yesterday. lol but finally i did it. so keep the hopes alive bro. you will do it or may be i will. CheeRS!!!

xeeshan
Offline
Regular
Last seen: 13 years 11 weeks ago
Joined: 2009-02-26
Posts: 38
Points: 0

hey bro. your problem is

hey bro. your problem is solved now. i just downloaded your html code and css on my local system and it took hardly 5 min to get it solved.

i have made only three changes in css. i am attaching css file. use it instead of yours. i hope it will work for you.

what i did is reduce bottom padding from content div

#content {
float: right;
width: 630px;
margin-right: 50px;
padding-bottom: 25px;
}

also then i removed margin from footer and *html footer

#footer {
clear: both;
width: 900px;
height: 100px;
margin-left: 50px;
background-image: url('images/footer.jpg');
position: relative;

}

* html #footer {
}

hope you will stick with divs Smile

AttachmentSize
style.txt 6.05 KB
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Thanks for the continued

Thanks for the continued help with this Xeeshan! The only problem with doing that is on a page with little, to no, content on it. The negative margin on the footer, and the padding on the content div are there as part of the "footerstickALT" code. Here is the link to read more about this:

http://www.themaninblue.com/writing/perspective/2005/08/29/

What I'm trying to accomplish is to keep my footer on the very bottom of the page, no matter how little content is on the page. If there was no content at all, I'd want the header, a lot of white space, and then the footer on the bottom.

If I make the changes that you suggested, the footer positions directly beneath the content, and will float in the middle of the page. Like in this example:

http://www.themaninblue.com/experiment/footerStickAlt/bug_screenshot.jpg

The current version of my website, has it working in Firefox, but it does not work in IE7. You can see what I'm talking about on my website, in IE7, at:

http://www.bdeanguitar.com/about.html

What's funny is that, on my site (above link), the footer stays at the bottom of the page (as it should) when viewing it in FF, however, the padding below the content DIV is more than it should be. If you view it in IE7, the amount of padding is correct, however the footer is floating out of position..

I can't lock it down in both browsers, and it's driving me crazy lol.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 27 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey Xeeshan, I'm not sure if

Hey Xeeshan, I'm not sure if you're still trying to figure this out, but I decided to just change the footer graphic and let it float wherever the content ends.

I got the footerstickALT thing to work, but I couldn't get the faux column to go the entier length of the page if the window shrunk down. It was driving me nuts, so I gave up.. for now!

I think it looks fine.. although it's not what my initial design was going to be. Change is good sometimes though lol..

Long Page Example:
www.bdeanguitar.com/index.html

Short Page Example:
www.bdeanguitar.com/about.html

Thanks again for your help!