Firefox footer about 5px too high on a single page

image shows up perfect except for one page

[saskatchewandave]

Hi, I have been working on a portfolio site, and have an image at the bottom of the page. It will expand 100% width of the browser window, and stays only 135px high, which is what I want. The problem is that on one single page, this image always seems to pop up about 5 px higher then the bottom of the browser window.

It is fine in Explorer, and only happening in firefox.

Here is the style for the image:

<div style="width:100%; position:absolute; left:0px; bottom:0px; text-align:center; padding: 0px; margin: 0px;">
<img src="images/grass.jpg" style="width:100%; height: 135px; padding-bottom: 0px; margin: 0px;"></div>

(most of the margin:0 and padding:0 where added in there to try and fix the problem)

Any help would be MUCH appreciated!

[swa66]

Have you tried figuring out what's different between the pages where this happens from those that don't have it ?

doctype ? margin or padding on the body/html ?

[saskatchewandave]

The only difference between the pages is the content. I built the home-page first, then used it as a template for the others. I figured it might be an easy solution for someone on here, considering it's a FF only issue. I suppose I should go through the problem page and add any margin:0px; padding:0px; to anything possible, and perhaps that might solve it, or make it worse! ahhahaaa

Is it common practice to add margin:0px; padding:0px; to pretty much everything?

[swa66]

On new designs I start with

* (
 margin:0;
 padding:0;
}

Saves me a lot of trouble from browsers having defaults where I didn't expect them.

of course I need to add something again to a main body <p> to separate paragraphs again and something to allow some space for the bullets of a <li> that's used in a body. But at least it's more consistent instead of one browser using padding while the other uses margins.

[Homie_187]

Are you sure it's only Firefox? Have you tested in Opera or Safari?

Have you tried validating the page? Maybe you have an element open and the footer is aligning to the bottom of that.

By any chance does the one page that isn't working have the shortest amount of content?

Have you tried body,html{height:100%; margin:0px; padding:0px;}?

Anyways these are just some things that came to mind. It's hard to tell what is wrong without a link to the full page...

[Homie_187]

Instead of having the div and the image in the html maybe you could just do this in your css:

body{
background-image:url(images/grass.jpg);
background-repeat:repeat-x;
background-position:bottom center;
padding-bottom:135px;
}

[saskatchewandave]

Thanks for the replies, This site is great! I have not tested it in opera/safari, I'm really only concerned with IE and FF, although you make a good point. I will try validating the page and see, something that somehow slipped my mind.

The part you mention about adding "body,html{height: 100%; margin: 0px; padding:0px} - do you mean adding this to the html or the css. Sorry if that sounds like a basic question.
I also like your last suggestion about having it all contained in the css, another great idea.

Thanks again swa66 and homie_187, you guys are awesome. Yeah, I know what you mean about it's hard to tell without a link to the page, but from what I understand, that's not allowed here.

[swa66]

Personal URLs indeed aren't allowed per the forum charter. What is allowed is to post some minimal code that still has the problem. There are guidelines pinned to the top of this forum on how to post code.

Homie_187 is very right about validating: do try it e.g. at HTML [validator.w3.org] and CSS [jigsaw.w3.org]

Invalid HTML and/or CSS makes it very hard to predict what a browser will make of it.

Try taking out the content on the offending page bit by bit, once the problem goes away: you'll have found the bit that "did" it. It might be obvious at such a point.

To find out where an elements ends up on the screen I mostly use the "web developer" toolbar in firefox. It adds a menu and one of the items is "css/view style information ..." Turning that on allows you to hover over an element and it'll outline it and show you which it is. Clicking also shows the CSS applied to it as well as where the CSS comes from (if you have multiple files involved this can be handy).

[Homie_187]

You can download Opera and Safari for free, so you might as well test in them. You can download Safari 3 for Windows now, too.

You would add "body,html{height: 100%; margin: 0px; padding:0px}" to your css file, although on second thought the height:100% might cause some problems...

Having all of your style contained in the css is a very good idea, in fact that is pretty much the whole point of css - to separate markup from style. It sounds like the "grass" image is just decorative (not content) which means it should really be applied as a background image using css. If you really want the image to "stretch" as the window is resized then I'm not sure how to do that with a background image, but you can easily tile a background image to fill any space, which may actually be the effect that you are looking for.

It you could post some more code we could probably tell you what is causing the problem.

[saskatchewandave]

just checked the html over at w3 and only 23 errors! I'm suprised it even works! hahaha

I'm happy that my site is at least operational, and the only problem with the design is the 5px thing on one page, so not the end of the world. Since I am just starting the web design field, I will take all the steps you guys mentioned here and fix this, and know for next time!

The grass image is just decorative, and I do want it to stretch to fit the users screen. I also have a background image, which does tile and is positioned to the top (it is a blue/white gradient) to look like the sky. I think you can have only one background image? so I'm using the z-index levels for any layering.