I have an application that creates an editable grid and I have a need to have dynamic coulmn headers. I have created the necessary code and it runs fine in IE9 but not in FireFox?

String footnoteBackground = CELLTOASSOCIATEBACKGROUND.iterator().next();
String defaultBackground = "rgb(249, 249, 249)";

if ( highlight
&& hasNotes ) {
html = "<span style='padding-left: 8px; padding-right: 8px; background: transparent no-repeat bottom left " + footnoteBackground + " url(../images/default/grid/noteHeader.gif);'>" + currentTxt + "</span>";
}
else if ( highlight
&& !hasNotes ) {
html = "<span style='padding-left: 8px; padding-right: 8px; background: transparent " + footnoteBackground + ";'>" + currentTxt + "</span>";
}
else if ( !highlight
&& hasNotes ) {
html = "<span style='padding-left: 8px; padding-right: 8px; background: transparent no-repeat bottom left " + defaultBackground + " url(../images/default/grid/noteHeader.gif);'>" + currentTxt + "</span>";
}
else if ( !highlight
&& !hasNotes ) {
html = "<span style='padding-left: 8px; padding-right: 8px; background: transparent repeat-x " + defaultBackground + " url(../images/default/grid/grid3-hrow.gif);'>" + currentTxt + "</span>";
}
if ( html != null ) {
grid.getColumnModel().getHeaderGroups().get(headerTextIndex).setHtml(html);

}
grid.getView().refresh(true);

The above code updates the header clicked on IE9 but has no effect in FireFox any suggestions?
Thanks