Making a Google (Blogger) Gadget iframe transparent

Question

I created my very first Hello World style Google Gadget for my blogger blog, and struggling with that the surrounding iframe's background is white. I cannot set it transparent from the skin settings and not with adding CSS to my code as follows:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="hello world example" /> 
  <Content type="html">
     <![CDATA[ 
       <div id="countdown"></div>
       <script type="text/javascript">
         // Get userprefs

         var element = document.getElementById('countdown');
         var text = '';
          var today = new Date();
          var BigDay = new Date("March 8, 2013");
          var msPerDay = 24 * 60 * 60 * 1000;
          var timeLeft = (BigDay.getTime() - today.getTime());
          var e_daysLeft = timeLeft / msPerDay;
          var daysLeft = Math.floor(e_daysLeft);
          var e_hrsLeft = (e_daysLeft - daysLeft)*24;
          var hrsLeft = Math.floor(e_hrsLeft);
          var minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);

          element.innerHTML = text + '<span class="number">' + daysLeft + '</span>';

       </script>
       <style rel="text/css">

         body {
       background-color: transparent !important;
     }

    #countdown {
      text-align: center;
      font-size: 60px;
    }

       </style>
     ]]>
  </Content> 
</Module>

Answer 1

Oh, sorry, that was only a caching problem, the solution I posted here works actually. You just have to wait more before it is acutally being updated...