19 replies [Last post]
sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

I have been working on this site layout for quite some time and have been having trouble with getting the footer to work correctly and having the page extend to the bottom of the page and yet still stick to the bottom of the broswer window.

I have managed to get the footer to stick to the bottom of the window however it seems to be ignoring the main content causing very ugly overlap.

I realize that my css is horribly messy and perhaps too bulky as well but I would appreciate it if someone could point out what I'm doing wrong and how to go about fixing the problem.

the site with an inline style sheet
the style sheet in txt format

Cheers
-Matt

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

Your footer will stay at the bottom if you remove all your relative and absolute positioning. Use floats instead. Smile

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

are you talking about removing positioning on all the elements or just the footer element itself?

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

All elements.

Absolute and relative positioning can be tricky to make work. For what you are trying to accomplish, using floats for positioning will be less stress.

http://css.maxdesign.com.au/floatutorial/index.htm

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

I have tried removing absolute positioning and this results in a complete breakdown of all page layout.

Due to the fact that it is currently 5am here Shock I'll have to upload the examples later after my nap.

See ya again in a couple of hours Smile

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

It will work with just a few steps.

1. In your HTML markup, move <div id="content">...</div> before <div id="leftcontent">...</div>

2. In your CSS, add to #content { float: right; }

3. In your CSS, add to #footer { clear: right; }

That should take care of it, enjoy your nap. Smile

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

Ok ive managed to fix things so they look sort of like the way they did with absolute positioning. However this has introduced a whole new series of problems.

This page seems to look fine in IE6 however in FF the background of the container element doesn't repeat all the way to the end of the content. Instead it stops repeating at the point where the maximum window size ends.

When it comes to this page the footer no longer sticks to the bottom because the content isn't long enough to reach the bottom of the screen and this seems to be the case in both IE6 and FF.

The pages are all using the same external stylesheet now which can be found here

All the pages validate as valid XHTML:strict and the style sheet returns no erros in the jigsaw validator.

I have tried changing the height and adding min-height properties of most of the elements in all possible combinations to see if that would make any difference but so far it hasn't worked. I can't seem to find where it's breaking up.

If anyone can tell me what's wrong that would be great, most of the site is working as it should, it's just this dang footer that's causing me so much grief.

Cheers
-Matt

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

Here are some screen dumps from my screen to better illustrate what is going on. I'm running at 1600 x 1200 resolution so the layout breaking is a lot more dramatic.

Marie page in FF

Marie page in IE6

About page in both IE6 and FF

You can see what I mean about the footer not sticking to the bottom of the screen, the only time this actually works is in IE6 when the main content is long enough to reach the bottom.

What the heck is going wrong?

-Matt

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

Try removing:

html, body {
height: 100%;
}

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

To your #leftcontent add { float: left; }

Change #footer { clear: right; } to { clear: both; }

Smile

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

hahaha, youre not going to believe this but that has inverted the problem.

now IE6 is showing the footer halfway down the page overlapping the content, and FF is sticking the footer on the bottom where its supposed to be, although it seems to be having some wierd issues displaying the background image of the container element.

the thing is that this still only works for pages that has long content, i'm starting to think the only way this could possibly be solved is making a style sheet for long content and a totally different style sheet for short content.

i've been looking at the footer stick website recommended to me by a guy on another forum. I will attempt using that technique as well although it will mean re-doing a huge chunk of my css and restructuring my xhtml markup.

check out how the site looks without the html, body { height: 100%; } and with addition of the clear: both; and float: left;

a site that is slowly driving me insane Laughing out loud

oh and dude, thanks so much for all your help so far, you've really helped me out and it's greatly appreciated. Smile

-matt

*edit: typo*

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

Did you make the float modifications?

I downloaded your site, it works here in IE and FF, even with the pages with long content.

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

body, h1, p, li {
  font-family:'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica,
    Arial, sans-serif;
}

body {
  background: #7ac;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  width: 600px;
  margin: 0 auto 0 auto;
  background:  url(imgs/bg.png) center repeat-y;
  text-align: left;
  height: 100%;
}

#header {
  margin-left: 1px;
  width: 590px;
  top: 0;
  padding-bottom: 10px;
  height: 66px;
  position: relative;
  overflow: hidden;
}

#header span {
  background:   url(imgs/head.jpg) no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

#leftcontent {
  float: left;
  width: 125px;
  padding: 0 0 30px 10px;
}

#content {
  float: right;
  width: 430px;
  padding: 0 15px 30px 0;
}

#content p {
  margin: 0 0 0.5em 0;
  font-size: 0.9em;
}

#content ul li{
  margin: 0 0 0.5em 0;
  font-size: 0.9em;
}

#content h1 {
  font-size: 1.2em;
  margin: 0 0  0.2em 0;
}

#content h2 {
  font-size: 1em;
  margin: 0 0  0.2em 0;
}

#footer {
  background: #777;
  width: 591px;
  height: 1.4em;
  clear: both;
  font-size: 0.7em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 0;
}

#footer h1 {
  color: #fff;
  padding-bottom: 0;
}

#breadcrumbs {
  width: 100%;
  border-bottom: 1px dashed #777;
  color: #000;
  padding-bottom: 0;
  margin-bottom: 5px;
  font-size: 0.7em;
  font-weight: bold;
}

#breadcrumbs ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  border: none;
  font-weight: normal;
}

#breadcrumbs ul li {
  color: #777;
  font-size: 1em;
  list-style: none;
  display: inline;
  font-weight: bold;
}

#breadcrumbs ul li a {
  font-weight:200;
  color: #777;
  text-decoration: none;
}

#breadcrumbs ul li a:hover{
  text-decoration: underline;
}

.nav {
  width: 125px;
  background:   url(imgs/2.gif) repeat-y;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
}

.nav li {
  display:block;
  padding: 0 0 3px 0;
  border-bottom: 1px solid #fff;
  text-align: center;
}
.nav li.first {
  background:  url(imgs/1.gif) no-repeat;
  padding: 3px 0 3px 0;
}

.nav li.last {
  background:  url(imgs/3.gif) no-repeat;
  background-position: bottom;
  padding: 0 0 7px 0;
}

.nav li a {
  color: #fff;
  font-size: 0.55em;
  text-decoration: none;
}

.nav li a:hover{
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}/* CSS Document */

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

yup i implemented all the fixes you mentioned and here is 4 screen dumps to show what it looks on my screen with little side comments to illustrate the errors.

long content in FireFox

Long content in IE

Short content in FireFox

Short Content in IE

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

that last style sheet you posted has solved most of the problems i was having, the only issue is that the footer still does not want to stick to the bottom of the window when the content is short. I will try and figure out some combination of the style you did and the footer stick technique to see if that will fix it.

again dude your help has been outstanding, your assistance will be duly noted in the final style sheet once this is finished Wink

-matt

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

Hmm, Your current CSS file is not the same as the one I posted above. Try the swapping the one above, it will work.

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

Yeah I know it isn't. I'm just running some test locally on my machine and then I'll upload everything with the new style sheet. I've started writing the whole style from scratch element by element to make sure it's all working like it's supposed to, and I've implemented some of the footer stick code as well. *crosses fingers* let's hope this works Smile

-matt

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 6 days ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

trouble with footers and height

Ok, good luck on your site Matt. Let us know how it comes out. Smile

This is my big chance . . . yep, I blew it . . .

sasco
Offline
Regular
Last seen: 14 years 19 weeks ago
Timezone: GMT+11
Joined: 2004-11-19
Posts: 26
Points: 0

trouble with footers and height

Well here it is, everything is finally working as it should be. The footer sticks to the bottom of the page regardless of the length of the content.

I ended up rewriting most of the css and slightly restructuring the divs. I employed the footer stick technique used by solarDreamStudios.

There are still a few more things left to be done such as changing the picture of the little girl, adding content for the remaining sections and perhaps prettying things up a bit by adding a few images here and there but overall the design is just about completed.

Feel free to let me know what you think of it and thanks again for all the help guys, couldn't have done it without ya.

-Matt

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 12 years 46 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

trouble with footers and height

I am having a problem getting the footer stick to work with Mac IE 5.2. I believe it's an issue with the min-height, but I have yet to find a solution!

Anyone have any tips!?