| kara_404 on Apr 26, 2006 at 1:45:53 PM (# 11) I know I'm late to post a solution, but I had to resolve a similar problem on a site I was working on.
The problem:
My content was displayed in a centered, fixed-width div with a white background over a gray page. The height of the div was set to 100%. When the length of the browser window was shorter than the length of the page's content, Firefox would terminate the white div at the bottom of the browser window, and display the remaining content on the site's gray background. IE would continue the white div to the bottom of the page. (FF = 100% of browser window; IE = 100% of body length)
If I removed the 100% attribute from the height property, Firefox would display the white div to the end of the content, resolving the height issue for short browser windows, but would terminate the div at the end of the content, leaving empty gray space below the content if the browser window height was greater than the height of the content.
To resolve the issue, I nested 2 divs: #container and #main.
/* begin IE - Firefox 100% height hack */
#container {
margin: 0px auto;
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
width: 768px;
text-align: left;
height:100%
}
#main {
margin: 0px auto;
background-color: white;
width: 766px;
text-align: left;
}
/* end IE - Firefox 100% height hack */
The #main div allows the white background to display to the end of the content when the browser window is shorter than the length of the content in Firefox, while the #container div allows the white background to continue to the bottom of the window in both IE and Firefox.
It's ugly, but it works.*
*this has not been tested in Safari for Mac.
beedee78 on May 16, 2006 at 12:06:36 PM (# 12)
This message has been edited.This fix worked perfect for me in all browsers, including firefox:
<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;">
CONTENT
</div>
MHenke on May 17, 2006 at 1:29:14 AM (# 13)Hum, doesn't work for me in IE6/WinXP.
Locnar on Dec 29, 2006 at 9:08:58 PM (# 14)
This message has been edited.This issue is driving me absolutely NUTS!! I have tried everything here in addition to everything else I could find online and nothing works.
Any help would be much appreciated!!
http://www.multisourcingchina.com/city
OR (having some DNS issues w/Yahoo)
http://cs2.simplehost.com/~harveym/city/
Thank you!
Locnar
jmbl on Feb 27, 2007 at 11:55:37 AM (# 15)
This message has been edited.I made a little change of beedee78 suggest and works fine on FireFox and on InternetExplorer
<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; width:100%; height:100%">
CONTENT
</div>
PaddyCallaghan on May 23, 2007 at 8:48:05 AM (# 16)I have recently had a similar issue, where i was adding a CMS to a web site.
I redid my framed design in CSS and therefore had a top, left and bottom set section, with my website appearing in the middle right viewport.
--------------------
| ________________|
| | |
| | |
| | site here |
| | |
| |_______________|
| |
--------------------
When i had a background image repeating on the middle cell, with FF when scrolling down, like in your problem it stopped the image at the edge of the viewport, and displayed a white background afterwards.
IE was fine.
Like another member said in an earlier reply when they were talking about a similar incident but horizontally, i changed the height setting in CSS from height: 100% to *height: 100%.
Making this an IE only value worked in both.
Best of luck with the award.
Steven Kuypers on Dec 2, 2007 at 2:55:28 PM (# 17)I had the same problem: a background image did not repeat to a 100% in Firefox. Sometimes id did do it well after hitting the refresh key, but then after hitting F5 again it would be wrong again .. or not, a bit unpredictable.
It is somewhat buggy, a rare occasion of something that's better in IE then in FF.
Anyway, I did find a workaround, which does not explain much.. but it works.
On some pages of my website I had 3 columns, on others 2. I noticed that the background-image (in column one) didn't repeat to the length of the page on the 2 column-pages, but it did well on the 3 column-pages. The third column is an empty table with a height of 100% (and a color that differs from the rest of the page).
So, what I did: I added this to the 2 column-pages:
<td>
<table class="withoutThisTableTheImageInTheLeftColumnDoesNotRepeatInFirefox" cellpadding="0" cellspacing="0"><tr><td></td></tr>
</table>
</td>
and this tot the css:
.withoutThisTableTheImageInTheLeftColumnDoesNotRepeatInFirefox {
border-collapse: collapse;
height: 100%;
width: 0px;
margin: 0px;
background-color: white;
}
And now.. it looks perfect, in IE and in FF
| 
the well known height bug in firefox