Table Header Render In IE 8

61 views

Skip to first unread message

Joel Williams

unread,

Jun 27, 2013, 8:49:58 PM6/27/13

to jquer...@googlegroups.com

Take a look at the attached image. The headers in IE 8 are not rendering in a correct fashion. In the same image is Firefox where the same code has rendered correctly.

Below is a complete copy of the code. In this case I am pulling data from SharePoint web services, and formating the response into a string (formated like JSON), then evaluating the variable. I have seen this problem before, but for the life of me, I cant remember what the fix was... Could someone help me?

<html lang="en-au">
<head>
    <title>Pipeline</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >

    <link rel="stylesheet" href="CSS/Gantt/style.css" />

    <style type="text/css">
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        padding: 0 0 50px 0;
    }
    .contain {
        width: 1000px;
        margin: 0 auto;
    }
    </style>

    <script type="text/javascript" src="JS/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="JS/Gantt/jquery.fn.gantt.js"></script>
    <script type="text/javascript" src="JS/jquery.SPServices-0.7.2.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "CFS Opportunities",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Est_x0020_Start_x0020_Date' /><FieldRef Name='EST_x0020_RFP_x0020_Date' /></ViewFields>",
        completefunc: function (xData, Status) {
            dataSet = xData; // Preserve for use when needing to search through the dataset.
            myJSON = parseData(xData);
//            $('#print').append(myJSON);
            genChart(myJSON);
        }
    });

});

function genChart(myJSON) {
    "use strict";

    $(".gantt").gantt({
        source: eval(myJSON),
        navigate: "scroll",
        scale: "weeks",
        maxScale: "months",
        minScale: "days",
        itemsPerPage: 3,
        onItemClick: function(data) {
//            alert("Item clicked - show some details");
        },
        onAddClick: function(dt, rowId) {
//            alert("Empty space clicked - add an item!");
        },
        onRender: function() {
            if (window.console && typeof console.log === "function") {
                console.log("chart rendered");
            }
        }
    });
}

function parseData(dataSet) {
    myValues = '[';
    $(dataSet.responseXML).SPFilterNode("z:row").each(function() {
        var xray = '';
        var a = $(this).attr("ows_Title");
        var b = $(this).attr("ows_Created");
        var b = new Date(); // use today as the date;
        var b = b.valueOf();
        var c = $(this).attr("ows_EST_x0020_RFP_x0020_Date");
        var c = dateParser(c);

        var d = $(this).attr("ows_Est_x0020_Start_x0020_Date");

        if (c !== undefined) {
            var xray = xray + '{';
            var xray = xray + '"name" : "' + a + '", ';
//            var xray = xray + '"desc" : " ", ';
            var xray = xray + '"values" : [{ ';
            var xray = xray + '"from" : "/Date(' + b + ')/", ';
            var xray = xray + '"to" : "/Date(' + c + ')/" ';
//            var xray = xray + '"label" : "X" ';
            var xray = xray + '}] ';
            var xray = xray + '}, '
            myValues = myValues + xray;
        }
    });
    myValues = myValues.substring(0, myValues.length - 2);
    myValues = myValues + "]";
    return myValues;
}

function dateParser (mydate) {
    if (mydate !== undefined) {
        var a = mydate.split(" ");
        var a = a[0].split("-");
        var yearMy = a[0];
        var monthMy = a[1];
        var dayMy = a[2];
        var finalDate = new Date(yearMy, monthMy, dayMy);
        var finalDate = finalDate.valueOf();
        return finalDate;
    }
}

</script>

</head>
<body>
<div class="contain">
    <div class="gantt"></div>
</div>

</body>
</html>