Question

Getting a strange problem when loading the twitter widget asynchronously on IE. It loads just fine, but for some reason doesn’t apply any style (color, background are blank/default) only on IE (7,8,9).

Loading the script the standard way works also in IE.

The code looks like this and works on all browsers (including IE, but without the style)

<div id="twitter_div"></div>
<script>
    jQuery(window).load(function () {
        jQuery('<link rel="stylesheet" type="text/css" href="http://widgets.twimg.com/j/2/widget.css" >').appendTo("head");
        jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
            var twitter = new TWTR.Widget({
              id: 'twitter_div',
              version: 2,
              type: 'profile',
              rpp: 4,
              interval: 6000,
              width: 'auto',
              height: 300,
              theme: {
                shell: {
                  background: '#add459',
                  color: '#382638'
                },  
                tweets: {
                  background: '#ffffff',
                  color: '#141114',
                  links: '#4aed05'
                }   
              },  
              features: {
                scrollbar: false,
                loop: false,
                live: false,
                hashtags: true,
                timestamp: true,
                avatars: false,
                behavior: 'all'
              }   
            }).render().setUser('chucknorris').start();
        })
    })
</script>

You can see this live on this link.

It loses the style on IE even when set to chucknorris.

Answer 1

What you think to put the css in you own css to avoid problems

<style type="text/css">
#twitter_div .twtr-doc, #twitter_div .twtr-hd a, #twitter_div h3, #twitter_div h4 {
background-color: #ADD459 !important;
color: #382638 !important;
}
#twitter_div .twtr-bd, #twitter_div .twtr-timeline i a, #twitter_div .twtr-bd p {
color: #141114 !important;
}
#twitter_div .twtr-avatar {
display: none;
}
#twitter_div .twtr-new-results, #twitter_div .twtr-results-inner, #twitter_div .twtr-timeline {
background: white !important;
}
#twitter_div .twtr-tweet a {
color: #4AED05 !important;
}
</style>

Also good is it if put it in your main.css file to get a better caching experince of your static stuff and is all in one place

<script>
    jQuery(window).load(function () {
        $("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
        jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
            var twitter = new TWTR.Widget({
              id: 'twitter_div',
              version: 2,
              type: 'profile',
              rpp: 4,
              interval: 6000,
              width: 'auto',
              height: 300,
              theme: {
                shell: {
                  background: '#add459',
                  color: '#382638'
                },  
                tweets: {
                  background: '#ffffff',
                  color: '#141114',
                  links: '#4aed05'
                }   
              },  
              features: {
                scrollbar: false,
                loop: false,
                live: false,
                hashtags: true,
                timestamp: true,
                avatars: false,
                behavior: 'all'
              }   
            }).render().setUser('chucknorris').start();
        })
    })
</script>