Firefox Repeat-y problem

[dancrew32]

Hey, this bug is only in FF, it has to do with this 1px tall image that's repeating on the y axis to expand along with the content...

The page loads fine, but if you scroll down, you'll notice that in Firefox the repeat-y image stops at the bottom of the browser... I want it to continue on forever like it does in every other browser...

Please take a look here: Page Link (http://buttebusinessresources.com/?page_id=3)

My stylesheet is here: Stylesheet Link (http://buttebusinessresources.com/wp-content/themes/default/style.css)


This is very strange since I don't usually have FF problems... more the other way around.. haha

If anyone can help me with a fix, I would much appreciate it!!

[Excavator]

#wrap {
margin:0 auto;
position:relative;
width:921px;
background:#e9e7e7 url(i/mainbacky.gif) repeat-y top center;
/*height: 100%; remove this*/
font-size:.9em;
text-align:left;
}

100% is the height of the browser window in this case, but no more.

[dancrew32]

haha awesome, that fixed it all up! Thanks a ton!

[Excavator]

Very cool :thumbsup:

[dancrew32]

crap, I spoke too soon.. although pulling out that line did fix the cut off problem with longer pages, the shorter pages like This Page (the homepage) (http://buttebusinessresources.com/index.php) are stopping the repeat from reaching the bottom of your browser...

Is there anyway to make sure this repeat-y pattern is always extending to the bottom of the browser without using the height 100% on that wrap??

[Excavator]

Is there anyway to make sure this repeat-y pattern is always extending to the bottom of the browser without using the height 100% on that wrap??

That's a little more complicated.
A full height layout takes a couple extra tricks. I have a nice example here. (http://nopeople.com/CSS/full-height-layout/)
The CSS for that is at http://nopeople.com/CSS/full-height-layout/global.css to see how that's done.
Note there are specific things in that CSS that you will need to duplicate in both your CSS and markup:

html
body
*
#wrap
* html #wrap
#footer