Firefox 'footer at bottom of page' problem

[jperhay]

First of all - I'm fairly new at CSS [disclaimer]!

I have been working with one the great tutorials of Paul O'B pertaining to 'footer at bottom of window' techniques. With his first example code, it worked great until I bracketed the 'content goes here' text with <h1></h1>. It causes an extra line to be added before the 'outer div' section which in turn pushes part of the footer area off the screen. The '* html #outer{height:100%;}' CSS seems to handle the IE presentation just fine as expected, but Firefox tosses in the extra line. Remove the <h1>'s and Firefox performs as expected.

What have I missed that I can't do or am doing wrong??

John

[iarfhlaith]

Can you post up some code?

[Centauri]

Sounds like a margin collapse issue. The <h1> element has a default top and bottom margin, and if that top margin has nothing "solid" to push against, it sort of "punches through" the top of its container until it does hit something solid (like the top of the screen), which in turn has the effect of pulling the top of the container(s) down. A top border or padding on <h1>s container will prevent that from happening.

[iarfhlaith]

I always start off any css file with code that sets all margins and padding to the same for every browser. Then I explicitly define my margins and padding for each element I need to use.

The code is pretty simple:

* {

   margin:0;padding:0;
}

This should make the rendering of the default margin and padding on each browser much more predictable and might help you find the cause of your problem.

Also, if you don't already use FireBug for FireFox to inspect your CSS, then you should definitely give it a go. FireBug lets you highlight the margin and padding for any element on the page. It also does loads of other cool things but I think that feature in particular would help you out.

[Dan Schulz]

That does have problems with form controls though. Here's what I use instead (and I've been doing a lot of work with WordPress themes lately, so it really comes in handy).

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

[jperhay]

The padding/margin issue indeed was the problem. Being somewhat new at CSS, it does bring up a question. Iarfhlaith's suggestion was using the '*' selector while Dan's was to list the individual selectors. What might be the trade-offs of one vs the other? Any browser dependencies?

Thanks for all for your help!

[Dan Schulz]

The universal selector can interfere with form controls, which is why I no longer use it. It can be a real pain to use the universal selector to zero out the margins and padding on everything, onlly to have a browser not let you reapply it to an input or textarea element, for instance.