IE not applying CSS to JS, works in Chrome/FF

Question

For my site , which is based on Blogger, I use a widget called "recent articles". The styles apply in both Firefox and Chrome, but not in IE.

I am new to web development and do not know JS.

Specific CSS not being applied (title of articles):

.bp_item_title {
    margin: 10px 0;
    padding: 0;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 14px;
} 

I tested this in firebug on IE and it looks like the CSS style are not being attached to the elements. Why would IE not pass along these CSS styles to the elements/widget?

HTML Snippet

<!-- ... -->
<div class="widget-content">
<div id="bp_recent"><div class="bp_item_title"><a href="http://blog.onlinewagerreview.com/2012/05/miami-heat-vs-boston-celtics-game-2.html?utm_source=BP_recent&amp;utm-medium=gadget&amp;utm_campaign=bp_recent" target="_top" title="Miami Heat vs Boston Celtics, Game 2 Free Pick, Prediction">Miami Heat vs Boston Celtics, Game 2 Free Pick, Prediction</a></div>

    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.setAttribute("src", thumbUrl);
        if(imgFloat!="none")
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
        myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);

        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }

Source

Answer 1

setAttribute() does not work in IE for the style attribute. To support IE, use element.className = 'newClass'; . It would also be a good idea to use a function that checks if the class attribute is already set to a non-blank value and include those values when setting it. For example:

// $el is the element to add $class to
// $class is the string value to append to `class` attribute
function addClass($el, $class) {
 if(!$el){
  return false;
 }
    $c = $el.className;
    if (($c === null) || ($c === '')) {
        $el.className = $class;
    } else if ($c.indexOf($class) === -1) {
        $el.className = $c + ' ' + $class;
    }
}

// $el is the element to remove $class from
// $class is the string value to remove from `class` attribute
function removeClass($el, $class) {
 if(!$el){
  return false;
 }
    $c = $el.className;
    if (($c !== null) && ($c !== '') && ($c.indexOf($class) !== -1)) {
        if ($c.indexOf($class) === 0) $el.className = $c.replace($class, '');
                else $el.className = $c.replace(' ' + $class, ''); 
    }
}

Or simply set the class attribute to a new value (instead of appending a new class or removing an individual class):

myDiv.className = "bp_item_thumb";

...instead of...

myDiv.setAttribute("class", "bp_item_thumb");