Background Image Breaks In Ff...

[mboehler3]

Hi I have created a box in Photoshop, I've cut the top and bottom images and a 2px tall image as the background. I have an image inside the box that floats left with text on the right. It seems that once the text stops, the background image does as well. In IE it is fine, in FF I see this:Here is my XHTML:

<img src="/images/960/global/grid8_stageboxtop.gif" style="margin-bottom:-4px;" />	<div class="grid8_stagebox">	<div class="grid8_stagebox-copy">	<h3 title="On-Boarding Checklists">On-Boarding Checklists</h3>	<p>We provide general forms and checklists for on-boarding new clients or clients' employees quickly and easily.</p>	<img src="/images/960/accountant-center/ac_rc-onboardchecklist.gif" style="float:left;" />	<p><a href="#">Company Setup Guide</a> - Information to help you quickly set up a new client.</p>	<p><a href="#">Employee Setup Guide</a> - A quick reference guide that helps you add new employees to your clients' payrolls.</p>	<p><a href="#">On-Boarding Guide</a> - A valuable checklist for a smooth enrollment.</p>	</div>	</div>	<img src="/images/960/global/grid8_stageboxbot.gif" />

And the corresponding CSS:

.grid8_stagebox {background-image: url('/images/960/global/grid8_stageboxbckgd.gif'); background-repeat: repeat-y; width:630px;}.grid8_stagebox-copy {padding-left:40px; width:530px;}

Can someone explain why the background image breaks? Thank you in advance.

[Ingolme]

Because boxes don't extend to contain floated elements by default. You can add "overflow: auto;" to change that.