Internet Explorer Static GridView issues - html

Question

I am having some really weird issues with my static GridView Header. The lines in IE aren't lining up properly; some of them do, and others do not. Can some one help me out? It works perfectly in Chrome, just not IE.
Chrome:
IE:
Here is my relevant code.
<script type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 50) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.left = (tbl.clientLeft-25) +'px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.alignContent = 'center';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
//if (document.getElementById('DivHeaderRow').scrollLeft >= 300) {
// document.getElementById('DivHeaderRow').scrollLeft = 300;
//}
}
</script>
CSS
html, body {
margin:0px;
padding:0px;
width: 100%;
box-sizing: border-box;
}
CSS Header Style
.GVFixedHeader
{
font-weight: bold;
background-color: Green;
position: relative;
font-size: 12px;
text-align: left;
}

Answer 1

It has to do with how IE renders a GridView. I would custom change my formating on one cell of the table, but that would mess with IE and change the default settings. Chrome would correctly identify that I only wanted to add style not change completely.
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: inital;");
e.Row.Cells[i].Attributes.Add("style", "text-align: left;");//THIS IS WHAT I ADDED + some altering of the width of the JS
if (i == 1)
{
e.Row.Cells[i].Text = "Make Inactive?";
}
if (i == 9)
{
e.Row.Cells[i].Text = "Total Invoice YTD";
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
if (i == 13)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
}
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[i].Attributes.Add("style", "white-space: nowrap;"); } //ALWAYS makes sure there is no wrapping of text
}