954,595 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

div background not extended length of screen in Firefox 8

I have a wrapper div with nested divs. I have set the wrapper to be 100% the height of the screen whatever the resolution (HTML and Body have been set with height:100% and wrapper has been set to min-height:100%), and I have set an image to be the background (not a pattern). In IE8, there is no trouble with the code and the image correctly extends the length of the screen; however, in Firefox 8, the background image stops partway down the screen.

#wrapper {width:1028px; min-height:100%; margin:0 auto; background-image:url(assets/mainbg_T.png);}


Here is a link to the page in question: http://dominguezdevelopment.com/EWS/contact.html

Any ideas how to fix it in Firefox?

jesyka82
Newbie Poster
4 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
 

Maybe because you've got the attribute min-height(do you really need this?) Remove it and see what it looks like.

cheers,

rotten69
Posting Whiz
346 posts since May 2011
Reputation Points: 3
Solved Threads: 16
 

Maybe because you've got the attribute min-height(do you really need this?) Remove it and see what it looks like.

cheers,


Without min-height:100% the background on the wrapper does not appear at all in Firefox8. With height:100%, it shows the background, but it is stunted in both Firefox8 AND IE8.

jesyka82
Newbie Poster
4 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
 
Without min-height:100% the background on the wrapper does not appear at all in Firefox8. With height:100%, it shows the background, but it is stunted in both Firefox8 AND IE8.

I stumbled upon a solution on a blog. I set the wrapper position to absolute, set the left position to 50% and set the left margin to a negative margin half the width of the wrapper, and it properly positioned the div in the center of the page, and filled the page with the background image. Here's a link to the solution: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

jesyka82
Newbie Poster
4 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
 

it's hard to solve a problem without experinmanting with things. A handy tool that you may want to use for debugging HTML, JavaScript and CSS. It's a firebug add-on in Firefox browser.


I'm glad you found something that helped you with the problem you had.

rotten69
Posting Whiz
346 posts since May 2011
Reputation Points: 3
Solved Threads: 16
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: