Need help with Footer

HTML & CSS
1

I could use some help creating a Footer for each page of my website.

It just needs to be simple hyperlinks, yet if I can snazz it up some that never hurts?! :smiley:

Here is what I have so far…


	<div id="footer">
		<ul>
			<li><a href="contact_us.php">Contact Us</a></li>
			<li><a href="about_us.php">About Us</a></li>
			<li><a href="refund_policy.php">Refunds</a></li>
			<li><a href="privacy_policy.php">Privacy</a></li>
		</ul>
	</div><!-- End of FOOTER -->



#footer{
	position: relative;
	z-index: 2;
	clear: both;															/* Needed?? */
	min-width: 760px;													/* Same min-width as #wrapper. */
	max-width: 1200px;												/* Same max-width as #wrapper. */
	height: 59px;
	margin: 0 auto;
	border-top: 1px solid #000;
	background: #AAA;
	color: #000;
	font-size: 11px;
	text-align: center;
}

/* NEW */
#footer ul{
	list-style: none;
}

/* NEW */
#footer ul li{
	display: inline;
}

Other than making the font bigger, and adding padding, I’m not sure what to do?!

Also, I mimicked the code from my SitePoint book, but had I had to do this from scratch I would have thought that using Floats on the LI’s would be the way to go?! :-/

Any tips on improving my blah Footer are welcome!!

Thanks,

Debbie

2

One problem I’m having is that there is no way to move the links down or center then vertically?!

For example, if I enter a margin on the UL, in FireBug, the margin extends above the #footer?!


#footer ul{
	list-style: none;
	margin: 20px 0 0 0;
}

Same issue when I added a margin to <a>.

Very strange…

Debbie

3

Try using PADDING instead of margin. It’s more reliable. What you are encountering is called margin collapse, and it’s something quite common if you have floats in your content area.

As a rule of thumb, avoid declaring heights on things unless you have a image interaction, and even then… pad the line-height (which you aren’t setting) to make the total height instead of trying to say ‘height’. I also suggest NEVER trusting the default line-height. You change font-size, do yourself a HUGE favor and set the line-height explicitly.

Also curious why you’re setting widths on it – wouldn’t it be easier to just move it inside the wrapper so it picks up width from that – or is the page in question a min-height layout? Not sure why you need position:relative or z-index on it either. Yeah, that looks like it should be min-height, so where’s the negative top index… or is it that broken “let’s position the wrapper above the top” thing that NEVER works right?

Doesn’t help the illegibly small 11px either – again as a rule of thumb px is an accessibility /FAIL/, and as a large font/120 dpi user 11px is illegible nothingness for me – 12 is generally considered the smallest you should use, and I get squirrelly over anything smaller than 14px…

Sorry, guess I’m ending up with more questions than answers – though that’s typical when you just get a snippet instead of the full code.

4

Deathshadow,

All of this is Paul O’s code from his Min-Max 3-column, fixed-width with full-height columns and sticky footer set up.

(My modest additions have /* NEW */ above them…)

I tried padding before with no luck.

Tried it now and wha-lah!


/* NEW */
#footer ul{
	list-style: none;
	padding: 20px 0 0 0;
}

As a rule of thumb, avoid declaring heights on things unless you have a image interaction, and even then… pad the line-height (which you aren’t setting) to make the total height instead of trying to say ‘height’.

Paul did that for a reason. Something with the sticky footer.

I also suggest NEVER trusting the default line-height. You change font-size, do yourself a HUGE favor and set the line-height explicitly.

I did above…


body{
	background: #FFF;
	font-family: Helvetica, Arial, Sans-Serif;
	line-height: 1.4em;
	font-size: 0.9em;
}

Also curious why you’re setting widths on it – wouldn’t it be easier to just move it inside the wrapper so it picks up width from that – or is the page in question a min-height layout?

Yes it is. That doesn’t work. Good idea though.

Not sure why you need position:relative or z-index on it either. Yeah, that looks like it should be min-height, so where’s the negative top index… or is it that broken “let’s position the wrapper above the top” thing that NEVER works right?

Paul used a negative top margin and like this…


#wrapper{
	position: relative;		/* Create Containing Block. */
	z-index: 0;				/* Place below other elements */
	min-width: 760px;
	max-width: 1200px;
	min-height: 100%;		/* For other browsers ??
							Will expand beyond 100% ??? */
	margin:	0px auto;
	margin-top: -60px;		/* Make space for Footer. */
	background: #FFF;		/* Fill color for short Middle Column. */
	text-align: left;
}

Doesn’t help the illegibly small 11px either – again as a rule of thumb px is an accessibility /FAIL/, and as a large font/120 dpi user 11px is illegible nothingness for me – 12 is generally considered the smallest you should use, and I get squirrelly over anything smaller than 14px…

Paul again. :slight_smile:

(I switched it to 1em before you even said anything!!! Better??)

Sorry, guess I’m ending up with more questions than answers –

That’s okay.

I think your padding solved one issue. (I feel dumb I forgot about margin collapse.) :blush:

though that’s typical when you just get a snippet instead of the full code.

Yeah, you got 1/2 page of 20 pages!!! :smiley: (If Paul ever dies, I’m screwed!!) :lol:

Actually I get most of it, but my web layout is definitely Multi-Variable Calculus for my first-ever website!!! :cool:

Should I just have a boring shaded footer with blue hyperlinks for disclaimer stuff, or would you style it more?

Having “pipes” in between might look nice. (You had some trick you gave me for my Log In | Help area above, although I took that out for now since you can’t log in!!)

Debbie

5

Actually, 1EM will break the min-height – it’s why I was asking about that as min-height forces you to use px metric fonts unless you’re willing to risk it breaking on lf/120dpi sf/144dpi lt/75dpi, etc, etc…

If it’s min-height, some of the above code makes sense, though I’m wondering why it’s needing to play with z-index as the position:relative SHOULD handle it…

But that could be something else on the page. It’s the problem with getting just a tiny snippet – there are things you end up going “why is this here” when something else on the page needs it.

In any case, generally for height on a element like a fixed footer, where the element HAS to be the perfect height, I’d do something like:

font:normal 14px/15px arial,helvetica,sans-serif;
padding:22px 0 22px;

15px single line-height + 22px top padding + 22px bottom padding == the 59px. Doing it that way also would allow for ‘broken box model’ compatibility on IE 5.x (if you care) since the border would add up to that 60 total… with the text right in the center vertically.

6

Okay, thanks!!! :slight_smile:

Debbie

7

BTW, Death Shadow…

If I want to make my footer smaller, then I would just reduce the #footer height from 59px to say 40px, adjust the padding we discussed, and adjust this code…


#wrapper{
	margin-top: -60px;		/* Make space for Footer. */
}

#header{
	border-top: 60px solid #F00;	
		/* Compensates for negative margin in Wrapper
			which was used to make way for Footer. */
}

Sound right?

Debbie

8

Yup, you change those to the new height, and it should all line up.

9

Okay, thanks!

Debbie

10

Yes the only way to have a sticky footer is to control the height exactly (either ems or pixels will do).

However there are three things that must remain consistent no matter what method you use.

  1. The height of the footer (including padding and borders)
  2. A negative margin equal to the height of the footer placed on the outer container (top or bottom) or on the footer itself
  3. An element to soak up the overlap caused by the negative margin and once again equal to the height of the footer.

In my preferred example I add the negative top margin to the outer and pull it upwards allowing the footer to slide into view. I then soak up the space above the top of the monitor with a top border on the header element and the layout is fixed right at the start rather than adding a clearing element or padding bottom to inner elements which is much more messy in my opinion.

That’s the pitfall of only seeing a snippet of code and If I remember correctly then the stacking order was probably due to the full column colour overlays being used and stacking needed to be controlled explicitly.

If you are talking about the sticky footer technique I mentioned above then using a negative top margin on the outer is the best and neatest method and never (never say never) causes any problems. It’s just so much neater than remembering to add padding bottom to an inner container or adding a clearing element. The problem gets addressed right at the start and suffers from no real bugs that I’ve seen. I’ve done enough of these now (since my first in 2002) to know most of the bugs in all versions and my preferred version appears to be the most stable. It does have slightly different characteristics in that the footer is never pulled inside the wrapper so if you wanted the wrappers background to be behind the footer then you’d need to use the negative bottom margin approach.

I would still say that sticky footers should only be used where content can be controlled and should not contain a lot of content in a fluid layout but rather just enough for a few links and copyright message etc. If the footer needs to be large and have fluid content then a normal footer is the best option as usual.

11

So to be sure I got things right, how does this code look…


#wrapper{
	position: relative;		/* Create Containing Block. */
	z-index: 0;				/* Place below other elements */
	min-width: 760px;
	max-width: 1200px;
	min-height: 100%;		/* For other browsers ??
							Will expand beyond 100% ??? */
	margin:	0px auto;
	margin-top: -60px;		/* Make space for Footer. */
	background: #FFF;		/* Fill color for short Middle Column. */
	text-align: left;
}



#header{
	position: relative;
	z-index: 3;			/* Raise above Colored Columns. */
	clear: both;		/* Why are we using this??
						Something to do with Opera?? */
	width: 100%;		/* Width of Viewport. */
	padding: 0;		
	color: #000;
	background: #FFF;
	border-top: 60px solid #F00;	
		/* Compensates for negative margin in Wrapper
			which was used to make way for Footer. */
}


#footer{
	position: relative;
	z-index: 2;
	clear: both;			/* Needed?? */
	min-width: 760px;		/* Same min-width as #wrapper. */
	max-width: 1200px;		/* Same max-width as #wrapper. */
	height: 60px;
	margin: 0 auto;
/*	font-size: 11px; /**/
	font: normal 14px/15px arial,helvetica,sans-serif;		/* NEW */
	text-align: center;
	color: #000;
	background: #DDD;
}

/* NEW */
#footer ul{
	list-style: none;
	padding: 22px 0 23px 0;
}

/* NEW */
#footer ul li{
	display: inline;
}

/* NEW */
#footer ul li a{
	margin: 0 1em;
}

I would still say that sticky footers should only be used where content can be controlled and should not contain a lot of content in a fluid layout but rather just enough for a few links and copyright message etc. If the footer needs to be large and have fluid content then a normal footer is the best option as usual.

Yeah, my footers just have a few simple links like:

Contact Us | About Us | Privacy | Returns

Also, some of my pages have little content, so I don’t want the Footer creeping up!

One last thing, Paul…

What does this mean???

	font: normal 14px/15px arial,helvetica,sans-serif;

(I mean the 14px/15px)

Thanks,

Debbie

12

Yes that seems to look right and the sticky footer measurements are matched ok. (I’d need to see the whole page to confirm that there isn’t anything else that could confuse it but going on the above it should be ok.)

One last thing, Paul…

What does this mean???

    font: normal 14px/15px arial,helvetica,sans-serif;

(I mean the 14px/15px)

Thanks,

Debbie

The 14px is the font-size and the 15px is the line-height. It just makes sure the line height is as small as possible without clipping any characters. If you make the line height smaller than the font size then IE may clip the characters.

The font shorthand has special rules and must have some values in a specific order and must contain at least font-size and font-family to be valid.

13

Some browsers (been so long I forget which) will also screw up the condensed font declaration if you don’t at least declare a style/weight. It’s why I always include “normal”

Though it seems none of the browsers I test in require that anymore… I still do it as better safe than sorry. Even with saying “normal” it STILL ends up smaller than if you said font-size, font-family and line-height separately, so it’s all good.

14

I thought it might be short-hand.

Being a newbie, I prefer being verbose!

Thanks,

Debbie