Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    Detroit
    Posts
    81
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Problems with Printing and Popups IE9 FF8

    Hello.

    Im trying to put in a Popup printer-friendly page on my site.

    the Popup works great in Chrome and FireFox. It even works in IE - except im getting a black bg instead of the white i get in the other browsers.

    Also the print command is not working in Firefox or IE.

    Im running FireFox 8 and IE 9.

    heres the code for the Popup:

    Code:
    <script language="javascript" type="text/javascript">
    <!--
    function popitup(url) {
    	newwindow=window.open(url,'name','height=200,width=150');
    	if (window.focus) {newwindow.focus()}
    	return false;
    }
    
    // -->
    </script>
    </head>
    <div>
    <img src="IMAGES/BidsCouponSmall-text.png" />
    <br />
    <br />
    <a href="printcoupon.htm" target="coupon"
    onclick="window.open('printcoupon.htm','coupon','height=500,
     width=400,toolbar=no,directories=no,status=no,
     menubar=no,scrollbars=no,resizable=no'); return false;"
    >Click HERE To Print</a>
    	<br />
    </div>
    To avoid cluttering of this post, the page im having printing problems with can be found here:
    http://bidsservice.net/printcoupon.htm

    its all html, css, and JS. no server-side code.
    Last edited by Tim@DIM; 03-26-2012 at 08:51 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Okay, you are getting the black background because MSIE doesn't like your <body bgcolor="#FFF". Try #FFFFFF instead. Or, better, use style instead of obsolescent bgcolor. Or, even simpler, omit it entirely, since the defautl background color *IS* white.

    You are working *WAY* too hard on the printing of that coupon. There is no reason to pop uo yet a third window. Just use CSS to hide all except the coupon itself when printing.

    Example:
    Code:
    <style type="text/css">
    @media print {
    	* { display: none; }
            div#print_content { display: block; }
    }
    </style>
    Now, when the page is printed, everything except your <div id="print_content"> will not be displayed and hence not printed.

    And now your print button can just be
    Code:
    <input type="button" value="Print" onclick="document.print();"/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Okay, it wasn't quite as simple as that.

    But here. This worked:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Clinet side printer version</title>
    <style type="text/css">
    * { background-color: white; }
    
    .style1 {color: #0033FF}
    .style3 {
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    @media print { 
        h2, table, center, p { display: none; }
        div#print_content, div#print_content img { display: block; }
    }
    </style>
    </head>
    <body>
    <h2 align="center">Print This Coupon</h2>
    
    <h2 align="center">Present This Coupon At Time Of Service</h2>
    
    <div id="print_content" style="text-align: center;"><img src="http://bidsservice.net/IMAGES/BidsCoupon-text.png" /></div>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center">
    		Bid's Service Inc | 11276 10 mile rd. warren, mi 48083 | (586) 759-3040
                    <br />
    		site by detroit internet media and Detroit Internet Marketing | &copy; 2012
              </td>
            </tr>
    </table>
    <br />
    <center><input type="button" onclick="window.print();" value="Click here to print Coupon"/></center>
    <br />
    <br />
    <p style="font-size:12px" align="center"><a href="printproblems.html">Having Problems? Click HERE</a></p>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Tim@DIM (03-28-2012)


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •