Colorbox and inline html not showing in IE8 - internet-explorer-8

Question

I'm calling inline html in ColorBox and it shows no content in IE8. This can be replicated on Jack Moores own site. Simply goto the demo site, http://www.jacklmoore.com/colorbox/example1/ , then click the second to the last link "Inline HTML". Then click the bottom link to update content ... in IE8 the box shows nothing.
I'm having the same problem, but I'm creating the div collection on the fly as shown below. Its for a check box confirmation. Any suggestions?
$('input[name$=chkApproved]').click(function (e) {
var th = $(this);
if (th.is(':checked')) {
var dialog = '<div">'
+ '<div id="dialog">'
+ '<p style="margin-top: 30px;">'
+ 'Are you sure you want to approve this program?</p>'
+ '<p style="font-size: small;">'
+ '<strong>Note:</strong> This cannot be undone!</p>'
+ '<p style="text-align: center;">'
+ 'Approve'
+ ' '
+ 'Cancel'
+ '</p></div></div>';
$.colorbox(
{
onLoad: function() {
$("#cboxClose").remove();
},
overlayClose: false,
href: dialog,
open: true,
title: "Program Approval",
inline: true,
height: "210px",
onClosed: function () {
$("[id$=btnHiddenApprove]").click();
}
});
e.stopPropagation();
} else {
th.attr('checked', false);
}
});

Answer 1

The problem on my page was a broken link. Just fixed that, so it shouldn't be a problem. That wasn't specific to IE8, and I haven't had any troubles with IE8.
The only problem I see with what you posted is that you have a stray quote mark in the opening <div> element. I checked your content in IE8 and that was indeed the issue:
This:
var dialog = '<div">'
Should be this:
var dialog = '<div>'
The stray quote mark makes your markup not well formed, and it's up to the browser how they want to respond or recover from the error, leaving for very inconsistent results.

Answer 2

Here is the revised code for who ever is interested .... this code will show a confirmation on a check-box, and uncheck it if cancel is selected. The onClosed event fires a hidden button click event that goes through the gridview and sets any checked check-boxes.
function UnCheckBox(cb) {
//alert(cb);
$('#' + cb + '').removeAttr('checked');
}
$(document).ready(function () {
$('input[name$=chkApproved]').click(function (e) {
var th = $(this);
if (th.is(':checked')) {
var dialog = '<div>'
+ '<div id="dialog">'
+ '<p style="margin-top: 30px;">'
+ 'Are you sure you want to approve this program?</p>'
+ '<p style="font-size: small;">'
+ '<strong>Note:</strong> This cannot be undone!</p>'
+ '<p style="text-align: center;">'
+ 'Approve'
+ ' '
+ 'Cancel'
+ '</p></div></div>';
$.colorbox(
{
onLoad: function() {
$("#cboxClose").remove();
},
href: dialog,
open: true,
title: "Program Approval",
inline: true,
height: "210px",
onClosed: function () {
$("[id$=btnHiddenApprove]").click();
}
});
e.stopPropagation();
} else {
th.attr('checked', false);
}
});