It's quite puzzling why IE isn't applying the color based on the provided information... It could be a CSS issue or a lack of commas, among other possibilities. Nevertheless, let me try to assist you.
This code snippet seems to have a mix of JavaScript and jQuery, so I've attempted to consolidate it into jQuery for better compatibility with different browsers, especially IE. Additionally, I've introduced a class for cleaner organization.
// Initialization
var Objs = {
id : 'test',
status : "red"
};
// Calling function
first(Objs);
function first(Objs) {
var imgid= Objs;
secondMethod(imgid);
}
function secondMethod(imgid) {
var boxid = imgid.id;
var color = imgid.status;
if($('#boxcontent' + boxid).length < 1) { // If box doesn't exist, create new one
var boxText = $("<div></div>")
.attr("id", "boxcontent"+boxid)
.addClass("basicStyleNoColor")
.css({
'background-color' : color,
opacity : 0.9 // Jquery sets filter for IE...
});
$("body").append(boxText); // Insert here or return and insert later
return boxText;
}
}
CSS:
.basicStyleNoColor {
white-space:nowrap;
text-align:center;
border:2px solid ;
-moz-border-radius: 5px;
border-radius: 5px;
color:black !important;
}
You can find the code on Fiddle.net
I hope this explanation proves helpful in some way...