title: Why does my YUI data table not display correctly in IE?
body: <p>I have a YUI datatable set up, with about 90 rows of data in it and I want the user to order the columns as they see fit and then print the page.</p>
  
  <p>I have all the YUI stuff set up and it works great. However when printing, it removes all the coloring, and plays with the table layout.</p>
  
  <p>I added this:</p>
  
  <pre><code>[
  H1 { 
      text-align: center 
  }
  
  .hideOnPrint { visibility: hidden; display: none; }
  
  .yui-skin-sam .yui-dt table {
      font-size:10px;
      border:1px solid #808080;
      border-collapse:collapse;border-spacing:1;
  }
  .yui-skin-sam .yui-dt thead {
      text-align:center;
      font-family:"Lucida Grande","Verdana",sans-serif;
      font-size:12px;
      font-weight:bold;
      font-style:italic;
      display: table-header-group;
  }
  
  .yui-skin-sam tr {
      border:1px solid #888888;
  }
  ]
  </code></pre>
  
  <p>It prints fine in Firefox 3 now, however, it does not work well in IE7.</p>
  
  <p>Firefox 3 takes the table which is about 1.5 pages long, and cuts it into 2/3 on one oage, and 1/3 on another, both pages have titles, headings and are formatted properly.</p>
  
  <p>In IE7 it cuts the data in half, and duplicates the first half of the data on both pages.</p>
  
  <p>I am not sure if this is because of the YUI markup, or if IE needs some special settings, or what.</p>
  
  <p>this is the page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Intercom List&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" /&gt;
  
  &lt;style type="text/css"&gt;
  /*margin and padding on body element
    can introduce errors in determining
    element position and are not recommended;
    we turn them off as a foundation for YUI
    CSS treatments. */
  body {
      margin:0;
      padding:0;
  }
  
  H2 { 
      font-size: 10px;
      font-style: italic;
   }
  
  
  /* basic skin styles */
  .yui-skin-sam .yui-dt table {
      filter: alpha(opacity=100);margin:0;padding:2,3,2,3;text-align:center;font-family:"Lucida Grande","Verdana",sans-serif;font-size:11px;border-collapse:separate;*border-collapse:collapse;border-spacing:0;}
  .yui-skin-sam .yui-dt thead {border-spacing:0;border:none;border-right:0px solid #CBCBCB;} /* for safari bug */
  .yui-skin-sam .yui-dt caption {padding-bottom:0em;text-align:left;}
  
  .yui-skin-sam tr.yui-dt-even { background-color:#DFD2C2; } /* white */
  .yui-skin-sam tr.yui-dt-odd { background-color:#F3ECE4; } /* light blue */
  .yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
  .yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#D3C7B8; } /* light blue sorted EDF5FF */
  .yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
  .yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#E0D9D2; } /* dark blue sorted DBEAFF */
  
  &lt;/style&gt;
  
   &lt;STYLE type="text/css" media="print"&gt;
   H1 { 
      text-align: center 
  }
  
  .hideOnPrint { visibility: hidden; display: none; }
  
  .yui-skin-sam .yui-dt table {
      font-size:10px;
      border:1px solid #808080;
      border-collapse:collapse;border-spacing:1;
  }
  .yui-skin-sam .yui-dt thead {
      text-align:center;
      font-family:"Lucida Grande","Verdana",sans-serif;
      font-size:12px;
      font-weight:bold;
      font-style:italic;
      display: table-header-group;
  }
  
  .yui-skin-sam tr {
      border:1px solid #888888;
  }
  &lt;/STYLE&gt;
  
  
  
  &lt;script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"&gt;&lt;/script&gt;
  
  
  &lt;!--begin custom header content for this example--&gt;
  &lt;style type="text/css"&gt;
  /* custom styles for this example */
  .yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
  &lt;/style&gt;
  
  &lt;!--end custom header content for this example--&gt;
  
  &lt;/head&gt;
  
  &lt;body class="yui-skin-sam"&gt;
  
  &lt;h1&gt;INTERCOM List&lt;/h1&gt;
  
  &lt;!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --&gt;
  
  &lt;div class="hideOnPrint"&gt; &lt;h2&gt;Order List by clicking on the column header, resort the list by clicking and dragging the column header, resize the column by clicking on the devider line and dragging left or right.&lt;/h2&gt;&lt;/div&gt;
  
  &lt;div id="intercomList"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" src="employee data.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.Basic = function() {
  
          var sortLastName = function(a, b, desc) {
              // Deal with empty values
              if(!YAHOO.lang.isValue(a)) {
                  return (!YAHOO.lang.isValue(b)) ? 0 : 1;
              }
              else if(!YAHOO.lang.isValue(b)) {
                  return -1;
              }
  
              // First compare by lastname
              var comp = YAHOO.util.Sort.compare;
              var compState = comp(a.getData("lastname"), b.getData("lastname"), desc);
  
              // If states are equal, then compare by firstname
              return (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);
          };
  
  
          var sortFirstName = function(a, b, desc) {
              // Deal with empty values
              if(!YAHOO.lang.isValue(a)) {
                  return (!YAHOO.lang.isValue(b)) ? 0 : 1;
              }
              else if(!YAHOO.lang.isValue(b)) {
                  return -1;
              }
  
              // First compare by firstname
              var comp = YAHOO.util.Sort.compare;
              var compState = comp(a.getData("firstname"), b.getData("firstname"), desc);
  
              // If states are equal, then compare by lastname
              return (compState !== 0) ? compState : comp(a.getData("lastname"), b.getData("lastname"), desc);
          };
  
  
          var sortBuildingName = function(a, b, desc) {
              // Deal with empty values
              if(!YAHOO.lang.isValue(a)) {
                  return (!YAHOO.lang.isValue(b)) ? 0 : 1;
              }
              else if(!YAHOO.lang.isValue(b)) {
                  return -1;
              }
  
              // First compare by firstname
              var comp = YAHOO.util.Sort.compare;
              var compState = comp(a.getData("building"), b.getData("building"), desc);
  
              var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);
  
              // If states are equal, then compare by lastname
              return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc);
          };
  
          var sortCompanyName = function(a, b, desc) {
              // Deal with empty values
              if(!YAHOO.lang.isValue(a)) {
                  return (!YAHOO.lang.isValue(b)) ? 0 : 1;
              }
              else if(!YAHOO.lang.isValue(b)) {
                  return -1;
              }
              // First compare by firstname
              var comp = YAHOO.util.Sort.compare;
              var compState = comp(a.getData("company"), b.getData("company"), desc);
  
              var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);
  
              // If states are equal, then compare by lastname
              return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc);
          };
  
  
  
          var myColumnDefs = [
              {key:"extension", width: 65, sortable:true, resizeable:true},
              {key:"firstname", width: 100, sortOptions:{sortFunction:sortFirstName}, sortable:true, resizeable:true},
              {key:"lastname", width: 100, sortOptions:{sortFunction:sortLastName}, sortable:true, resizeable:true},
              {key:"company", width: 100, sortOptions:{sortFunction:sortCompanyName}, sortable:true, resizeable:true},
              {key:"building", width: 100, sortOptions:{sortFunction:sortBuildingName}, sortable:true, resizeable:true}
          ];
  
          var myDataSource = new YAHOO.util.DataSource(YAHOO.Data.employees);
          myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
          myDataSource.responseSchema = {
              fields: ["extension","firstname","lastname","company","building"]
          };
  
          var myDataTable = new YAHOO.widget.DataTable("intercomList",
                  myColumnDefs, myDataSource, {draggableColumns:true});
  
          return {
              oDS: myDataSource,
              oDT: myDataTable
          };
      }();
  });
  &lt;/script&gt;
  
  &lt;!--END SOURCE CODE FOR EXAMPLE =============================== --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the employee data file:</p>
  
  <pre><code>YAHOO.Data = {
      employees: [
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
          {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}
      ]
  }
  </code></pre>