Member Avatar for jesyka82

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?

  • 2 Contributors
  • 4 Replies
  • 197 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rotten69
Member Avatar for rotten69

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

cheers,

Member Avatar for jesyka82

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.

Member Avatar for jesyka82

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/

Member Avatar for rotten69

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.