Question

I have a page with a data grid and when I print it i want only the data grid to be printed. On clicking print all other elements in the page (left nav, header, footer etc) are removed and only the necessary part(which is in a div called printdiv) is displayed. But unfortunately I can’t get it to display the background i want. Please Help!!!
I need the background to be white, but instead it is grey, which is the background for the rest of the site, Is there a way I can change the background for the form alone?

This is the javascript I’m using

            <div id="printDiv" >

                <div id="maincontent-right-wrapper">
                    <div class="page-heading">
                        <spring:message
                            code="rmp.store_performance_yearly.page_header.store_performance_yearly" />
                    </div>

                    <!--shop starts-->
                    <div class="shop-promoter-wrapper">
                        <div class="shop-promoter-inner">

                            <ul>
                                <li><spring:message
                                        code="rmp.store_performance_yearly.label.store" /></li>
                                <li>&nbsp;</li>
                                <li><form:select path="storeid">
                                        <form:options items="${StoreList}" itemValue="storeId"
                                            itemLabel="storeName" />
                                    </form:select></li>
                                <li><img src="../static/images/spacer.gif" width="26"
                                    height="1" /></li>

                                <li><spring:message
                                        code="rmp.store_performance_yearly.label.year" /></li>
                                <li>&nbsp;</li>
                                <li><form:select path="year">
                                        <form:options items="${YearList}" />
                                    </form:select></li>

                                <li>&nbsp;</li>
                                <li><a href="#" onclick="callGo(1)">
                                        <div class="button-wrapper">
                                            <div class="button-left">&nbsp;</div>
                                            <div class="button-middle">
                                                <spring:message
                                                    code="rmp.store_performance_yearly.button.go" />
                                            </div>
                                            <div class="button-right">&nbsp;</div>
                                        </div>
                                </a></li>

                            </ul>

                        </div>
                    </div>

Answer 1

Code is worth a thousand words, but FYI browsers usually don’t print backgrounds, and it’s a user-controlled setting whether they do. So your best bet is to not a use a background (there’s a reason browsers don’t print them, the results tend not to be very good) or make whatever background you want to have an actual element on the page, behind the div (lower in the Z order).