Topic: Firefox Background Stretching (Page 1 of 1)

So, I got into Firefox recently, and then saddened that my site's ranting centered text (that went off the page) had no background after one screen height's worth of text. The factor in that height of background was embedded in a css div property set to either 100% or i could give it a specific, huge number of px in order to sloppily fix the issue.

The code would be similar to...

#somename
{
width: 500px;
height: 100%;
position: relative;
}

In which, the above code worked (not sure of its validation but worked) in IE but failed to stretch in Firefox.

How can I get a div that stretches as far as it only needs to in Firefox?

Thanks - Ryandrew

You need to specify a height of 100% for both the HTML and BODY elements if you wish for anything inside of those elements to be 100%. As it stands, it *is* stretching the #somename to 100%....but 100% of the content, and not the viewport.

The issue then becomes, as you noted, that the styling ends at the end of the view port.
The only solution I have seen for this, is to add this to the CSS for the #somename:

display:table;

This thread at the GN does a good job of addressing this issue -
http://www.gurusnetwork.com/discussion/thread/2907/

I would also most likely take that 'position:relative;' out of there.



(Edited by DL-44 on 03-06-2005 15:45)

Hey DL, I didn't really have a whole lot of success with what was suggested.

I have elaborated more and given a link to the page and therefor the code as well at the GN... I replied to the post mentioned above. Thanks though, and hope someone will read the GN reply and gets this situation solved. - Ryandrew

Try removing height: 100% from you class

that's necessary for when the contents of #textstuff does not reach to the bottom of the viewport

Gave the code a cursory look.

Would first recommend losing the positioning altogether. It tends to cause more problems than anything else.

Also, I don't see the 'display:table;' in there anywhere...that part is needed to make the styling extend past the view port.

You also have a bit of abuse of the H1 tag going on...

To whoever sent me a forum message form my very old website about ff background stretching, I changed the link in my info now.