tags:

views:

2223

answers:

2
Q: 

Why does my YUI data table not display correctly in IE?

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.

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.

I added this:

[
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;
}
]

It prints fine in Firefox 3 now, however, it does not work well in IE7.

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.

In IE7 it cuts the data in half, and duplicates the first half of the data on both pages.

I am not sure if this is because of the YUI markup, or if IE needs some special settings, or what.

this is the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Intercom List</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />

<style type="text/css">
/*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 */

</style>

 <STYLE type="text/css" media="print">
 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;
}
</STYLE>



<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"&gt;&lt;/script&gt;


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">

<h1>INTERCOM List</h1>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div class="hideOnPrint"> <h2>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.</h2></div>

<div id="intercomList"></div>

<script type="text/javascript" src="employee data.js"></script>

<script type="text/javascript">

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
        };
    }();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>

This is the employee data file:

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"}
    ]
}
A: 

Have you tried specifying a specific print stylesheet?

BTW, Prob better to link to a working version of the code, rather than expect stackoverflow users to recreate locally.

Paul  2009-03-20 18:28:03
i understand however i cannot link to a working copy that is running locally on my machine, i dont have a web box i can just link to...also the concept of a print stylesheet is done though <STYLE type="text/css" media="print">
Greg R  2009-03-20 18:56:10
A: 

Hello, By default ,the background images and colors would be disabled in all browser.Just enable it afterwards it would be printing correctly.

Regards Kailash Kumar P Email:[email protected]

Kailash Kumar P  2010-01-07 13:04:46

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?