www.webdeveloper.com
Results 1 to 5 of 5

Thread: Print CSS not formatting XML Properly

  1. #1
    Join Date
    Feb 2012
    Location
    Hattiesburg, MS
    Posts
    13

    Question Print CSS not formatting XML Properly

    I am having issues printing one particular page on a client's website. I'm not sure if this is a CSS or JavaScript issue, but I feel it may be a combination of both.

    I have 2 CSS documents linked to all pages: main_css.css and print_css.css.

    Whenever a page is printed the print_css.css file strips all background color and menus and prints only the header, body, and footer sections. This works perfectly for all pages except my case listing page.

    The case listing page pulls XML data (parsed using jQuery) and displays it as a table.

    Everything displayes perfectly on the screen, but whenever the page is printed, all of the XML data is run on. The CSS controlling the output table is actually identical in both the caseList_css and print_css files.

    I have tried setting the table width to smaller values with no affect to the poorly formated print data.

    Does anybody have any idea what might be causing the run-on? Is it CSS or JavaScript?

    Here is the live page: Case List

    Here are the codes and thank you for your help.

    HTML File
    Code:
    ...
    <!-- container in which the XML data will be displayed -->
    <div id="Content_Container">
    
    <div id="Warning">
    <!-- This div is hidden when the page loads by the js file. -->
    WARNING - JavaScript is NOT Enabled.
    </div> <!-- end div Warning -->
    
    </div> <!-- end div Content_Container -->
    ...

    JS file
    Code:
    // Request the XML document once the HTML document is loaded.
    $(document).ready(function(){
    			
     /* Hide the notice Div. If JavaScript is disabled it will warn the users that JavaScript is disabled and they will not be able to view the Case Listings. */
       $("#Warning").hide();
    			
       // Open XML Document
      $.ajax({
     	type: "GET",
    	url: "caseList.xml",
    	dataType: ($.browser.msie) ? "xml" : "text/xml", // check browser. If IE use xml, else use text/xml
    	success: parseXML
               }); // end $.ajax function
    
    }); // end document.ready function
    
    
    // Function to parse through XML file
    function parseXML (xml) {
    	
    $("#Content_Container").append("<h2 id='CaseListing_Title' class='center'>Expert Witness Case Listing</h2>");
    	
    $("#Content_Container").append("<table id='Cases_Tbl' cellspacing='0' cellpadding='1em'>");
    $("#Content_Container").append("<thead class='center'>");
    $("#Content_Container").append("<th class='col1'>Case Designation</th>");
    $("#Content_Container").append("<th class='col2'>Year Retained</th>");
    $("#Content_Container").append("<th class='col3'>Retained By</th>");
    $("#Content_Container").append("<th class='col4'>Nature of Issues or Dispute</th>");
    $("#Content_Container").append("<th class='col5'>Status</th>");
    $("#Content_Container").append("</thead>");
    				
    $("#Content_Container").append("<tr><td colspan='5'>&nbsp;</td></tr>");
    	
    //Traverse through each element in the XML document and input it into the table
    $(xml).find("CASE").each(function ()
    {
    
         $("#Content_Container").append("<tr>");
         $("#Content_Container").append("<td class='col1'>" + $(this).find("PARTIES").text() + "</td>");
         $("#Content_Container").append("<td class='col2'>" + $(this).find("YEAR").text() + "</td>");
         $("#Content_Container").append("<td class='col3'>" + $(this).find("RETENTION").text() + "</td>");
         $("#Content_Container").append("<td class='col4'>" + $(this).find("ISSUE").text() + "</td>");
         $("#Content_Container").append("<td class='col5'>" + $(this).find("STATUS").text() + "</td>");
         $("#Content_Container").append("</tr>");
    		
         $("#Content_Container").append("<tr>");
         $("#Content_Container").append("<td class='col1'>Case #&nbsp;" + $(this).find("NUMBER").text() + "</td>");
         $("#Content_Container").append("<td class='col2'>&nbsp;</td>");
         $("#Content_Container").append("<td class='col3'>&nbsp;</td>");
         
         // Check to see if the "OTHER" element is empty. If empty populate the td with &nbsp;
         if ($(this).find("OTHER").text() == null || $(this).find("OTHER").text() == "") {
    	$("#Content_Container").append("<td class='col4'>&nbsp;</td>");
             } // end if
         
         // The OTHER element had text, so print out the text.
         else {
    	$("#Content_Container").append("<td class='col4'><strong>" + $(this).find("OTHER").text() + "</strong></td>");
    	} // end else
    
         $("#Content_Container").append("<td class='col5'>&nbsp;</td>");
         $("#Content_Container").append("</tr>");
    		
         $("#Content_Container").append("<tr class='btmTR'>");
         $("#Content_Container").append("<td class='btmcol1'>" + $(this).find("RETAINED").text() + "</td>");
         $("#Content_Container").append("<td class='btmcol2'>&nbsp;</td>");
         $("#Content_Container").append("<td class='btmcol3'>&nbsp;</td>");
         $("#Content_Container").append("<td class='btmcol4'>&nbsp;</td>");
         $("#Content_Container").append("<td class='btmcol5'>&nbsp;</td>");
         $("#Content_Container").append("</tr>");
    	
    }); // end find CASE function
    	
    $("#Content_Container").append("</table>");
    	
    } // end function parseXML (xml)

    caseList_css code
    Code:
    @media screen {
    ...
    
    @media screen {
    #CaseListing_Title {
    	margin-top: -290px;
    	
    }
    
    .col1 {
    	width: 35%;
    }
    
    .col2, .col3 {
    	width: 10%;
    	text-align: center;
    }
    
    
    .col4 {
    	width: 30%;
    }
    
    col5 {
    	width: 15%;
    	text-align: right;
    }
    
    .btmcol1 {
    	width: 35%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    }
    
    
    .btmcol2, .btmcol3 {
    	width: 10%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    	text-align: center;
    }
    
    .btmcol4 {
    	width: 30%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    }
    
    .btmcol5 {
    	width: 15%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    	text-align: right;
    }
    
    .btmTR {
    	margin-bottom: 10px;
    }
    
    } /* end @media screen */
    
    }

    print_css code
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    @media print
    {
    	
    body {
    	background-color: #FFFFFF;
    	color: #000000;
    }
    
    /* ********************************* General Styles ********************************* */
    
    .center {text-align: center;}
    .right {text-align: right;}
    
    .bold {font-weight: bold;}
    
    .clearFloat {
    	clear: both;
    	height: 0;
    	font-size: 1px;
    	line-height: 0px;
    }
    
    /* ********************************* Div Styles ********************************* */
    #Content_Container {
    	background-color: #FFFFFF;
    }
    
    #Header_Container {
    	border-bottom: solid thin;
    	clear: both;
    }
    
    #Title_Container {
    	font: bold 44pt "Palatino Linotype", "Book Antiqua", Palatino, serif;
    	float: left;
    	margin: auto auto auto 15px;
    }
    
    #Quote_Container {
    	width: 466px;
    	margin: 0px auto 0px 10px;
    	padding-bottom: 5px;
    	font-size: 0.8em;
    	clear: both;
    }
    
    
    #Menu_Container { display: none;}
    #TopMenu_Container { display: none;}
    
    #Footer_Container {
    	width: 100%;
    	min-width: 800px;
    	padding: 5px 0 5px 0;
    	margin: 0 auto 0 auto;
    	text-align: center;
    	font-weight: bold;
    	font-size: 0.8em;
    	border-top: solid thin;
    }
    
    
    #CaseListing_Title {
    	margin-top: 100px;
    }
    
    /* ********************************* Image Styles ********************************* */
    #Eric_Picture {
    	margin: 10px;
    	border: none;
    	float: left;
    }
    
    /* ********************************* Table Styles ********************************* */
    
    #Cases_Tbl {
    	width: 80%;	
    }
    
    .col1 {
    	width: 35%;
    }
    
    .col2, .col3 {
    	width: 10%;
    	text-align: center;
    }
    
    
    .col4 {
    	width: 30%;
    }
    
    col5 {
    	width: 15%;
    	text-align: right;
    }
    
    .btmcol1 {
    	width: 35%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    }
    
    
    .btmcol2, .btmcol3 {
    	width: 10%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    	text-align: center;
    }
    
    .btmcol4 {
    	width: 30%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    }
    
    .btmcol5 {
    	width: 15%;
    	border-bottom: solid thin;
    	margin-bottom: 5px;
    	text-align: right;
    }
    
    .btmTR {
    	margin-bottom: 10px;
    }
    
    } /* end media Print */

  2. #2
    Join Date
    Feb 2012
    Location
    Hattiesburg, MS
    Posts
    13
    Morning bump.

  3. #3
    Join Date
    Feb 2012
    Location
    Hattiesburg, MS
    Posts
    13
    Evening bump... no suggestions???

  4. #4
    Join Date
    Feb 2012
    Location
    Hattiesburg, MS
    Posts
    13
    Afternoon bump... opcorn:

  5. #5
    Join Date
    Feb 2012
    Location
    Hattiesburg, MS
    Posts
    13
    Daily bump... it's still an issue....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles