While developing a website on Chrome and Firefox, I was informed that it also needs to function properly in Internet Explorer. I managed to resolve the double padding issue in IE, but now I'm facing a new problem. The content of my "grid" disappears after the JavaScript setinterval function replaces the div. This issue only occurs when viewing the page in IE.
Below is the code snippet leading up to where the content is dynamically created and displayed:
<div id=\"col1a\" style=\"float:left; width:605px; height:300px;\"> \
<div id=\"GridContent\" class=\"FormContent\"> \
<div id=\"ContentPlaceHolder1_FormSection\" class=\"FormSection\"> \
<div id=\"ContentPlaceHolder1_ProgramGridHeader\" class=\"ProgramGridHeader\"> \
<div id=\"ContentPlaceHolder1_HeaderRow\" class=\"HeaderRow\"> \
<div readonly=\"readonly\" class=\"Cell\" style=\"width: 57px\">Stage</div><div class=\"Cell\" style=\"width: 78px\">Type</div><div class=\"Cell\" style=\"width: 50px\">Time</div><div class=\"Cell\" style=\"width: 44px\">Int</div><div class=\"Cell\" style=\"width: 44px\">Dry</div><div class=\"Cell\" style=\"width: 44px\">Wet</div><div class=\"Cell\" style=\"width: 52px\">RH%</div><div class=\"Cell\" style=\"width: 72px\">Option</div><div class=\"Cell\" style=\"width: 72px\">Damper</div><div class=\"Cell\" style=\"width: 44px\">Fan</div> \
</div><br /> \
<div class=\"Row\" position: relative;> \
"};
And here is the CSS specifically for Internet Explorer:
.Row { border: solid 0px green; float: left; min-width: 0; clear:both; position: relative; -webkit-border; padding 1;}
.RowCompleted { border: solid 0px #7F9DB9; background-color: #C0C0C0; color: #000;}
.RowNoShower { border: solid 0px #7F9DB9; background-color: #FFF; color: #000; min-width: 0; }
.RowColdShower { border: solid 1px #7F9DB9; background-color: #ADD8E6; color: #000; }
.RowWarmShower { border: solid 1px #7F9DB9; background-color: #FB0; color: #000; }
.RowHotShower { border: solid 1px #7F9DB9; background-color: #F00; color: #FFF; }
.RowInProgress { border: solid 0px #7F9DB9; background-color: #0F0; color: #000;}
.RowPaused { border: solid 0px #7F0DB9; background-color: #00F; color: #FFF;}
I would really appreciate any help in figuring out why the content disappears in IE. Thank you!