mboehler3 Posted October 2, 2009 Share Posted October 2, 2009 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 2, 2009 Share Posted October 2, 2009 Because boxes don't extend to contain floated elements by default. You can add "overflow: auto;" to change that. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.