Tweetmeme button transparent in Internet Explorer

After adding the TweetMeMe to my blogger photoblog (http://www.marcorama.nl/) on march 18 I noticed the iframe had a white background in IE.

With some googeling I'd found a couple of post that for 80% covered the solution:

• http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html
• http://www.geekblogger.org/2010/01/retweet-button-for-bloggers-tweetmeme.html
• http://www.tech-recipes.com/rx/1253/htmlcss-transparent-iframes-in-all-browsers/

The steps to add the TweetMeMe button are:

1. Login to blogger.com
2. Go to the Layout tab
3. Click on the Edit HTML link
4. Before editing your template, you may want to save a copy of it. A link to do so is present at the top of the page
5. Check the Expand Widget Templates box
   (This way you can edit the code of the blogpost page element)
6. Look for <b:if cond='data:post.dateHeader'> and paste the code below (without the <b:if cond='data:post.dateHeader'> ofcourse ;))

The code

<b:if cond='data:post.dateHeader'>

<div id='tm_box' style='height:61px; width: 50px; position: relative; float:right; left:0px; padding: 0px 5px 5px 5px; background: transparent !important;'/>

<script type='text/javascript'>

function tweetMemeButton() {

if (document.getElementById('tm_box')) {

var iframeCode='';

var tm_posturl='<data:post.url/>';

iframeCode += "<iframe src=\"http://api.tweetmeme.com/button.js?url=" + tm_posturl + "&style=normal&source=marcoramaNL&service=bit.ly&hashtags=photography\" scrolling=\"no\" frameborder=\"0\" width=\"50\" height=\"61\" ALLOWTRANSPARENCY=\"true\"></iframe>";

document.getElementById('tm_box').innerHTML = iframeCode;

}

}

window.onload = tweetMemeButton;

</script>

Hope this helps you add the TweetMeMe button transparent to your site.

Marco