CSS - Controlling Printing

Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this?

Im trying to control how the text formats within a div tag, that sits inside a menu.

The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly'

I have the menu sitting he http://www.electronical.org/tmp/playsongs/

If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu.

How do I format this so it is the width of the submenu and wraps to the length of it?

Thanks for any help.

Hi.. another question for the CSS mastas out there.

I have a table taht I have applied a class to:

PHP Code:
<table class="middle"
                       cellspacing="0"
                       cellpadding="0"
                       border="0">
                    <tr>
                        <td>&nbsp;<img border="0"
                             src="images/spacer.gif"
                             width="1"
                             height="1">
                         </td>

                        <td align="left">
                            <p class="customHeading">aaaa</p>
                        </td>

                        <td>
                            <p align="right">
                            <a class="importantLink" href="">aaa</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
                            <a class="importantLink" href="">aaa</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                            <a class="importantLink" href="">aaa</a>
                            </p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" valign="top">

<table class="content"
                                           cellspacing="0"
                                           cellpadding="0"
                                           border="0">
                                        <tr>
                                            <td align="left">aaa:</td>

                                            <td><input type="text"
                                                   name="aaa"
                                                   size="22"
                                                   class="formField">
                                            </td>

                                            <td><a href="#">
                                                   <input type="submit"
                                                   value="SEARCH"
                                                   class="formButton">
                                                 </a>  
                                            </td>
                                        </tr>
                                    </table>

</td></tr></table>

.middle {
    width: 760px;
    height: 360px;
    background-color: #FFFFFF;
}

.content {
  background-color: #FFFFFF;
  font: 13px Arial, sans-serif;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  
} 





The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height?

is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design.


Thanks

I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer.

Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.?

Thanks for your suggestions.