Text Widget background color in IE6-7-8

Hi!
I’ve a website almost finished, https://www.valensise.com (i don’t like the color combos but the commitent pay, so he decides! don’t shot me for your eyes pain!!!)

By the way the problem is that in the upper right text widget (that i modified to be automatically scrollable) a black background is showing for the widget space.
This happen only in IE 6-7-8, in firefox and safari all works fine.

I’ve discovered that the black background come from the body background css rule that’s set to #000 (black).

If i set the body background to white and i set the header (where the widget is placed) background to black i’ve the text widget background white.

Seems that in IE the div takes automatically a background color, meanwhile in firefox and safari remains transparent.

The markup is the following:

<div id="offerte" class="grid_5">
     <div id="slideshow">
          <div class="slides">
               <ul id="sidebar">
	            <li id="text-3" class="widget widget_text">
                         <h2 class="widgettitle">Offerte</h2>
		         <div class="textwidget">In questo riquadro troverete le offerte di Valensise s.n.c.
                         </div>
                    </li>
                    <li id="text-4" class="widget widget_text">
                         <h2 class="widgettitle">Offerte</h2>
			 <div class="textwidget">Tornate sul nostro sito per vedere le nuove offerte!
                         </div>
                    </li>
               </ul>
          </div>
    </div>
</div>

And i have the following css:

#offerte{background:transparent url(images/header_offer_back.png) no-repeat ; height:130px; margin-top:15px; margin-left: 5px; margin-right: 5px; width: 400px;}
#offerte h2{padding-top:10px; padding-left:0; font-size:18px;font-style:italic; color:#32a750;}
#offerte p{padding-top:5px; padding-left:10px; font-size:12px; line-height:18px;}
#offerte a{color:green;}
/* SLIDESHOW ------------------------------------------ */
#slideshow {width: 380px; background: transparent url(images/header_offer_back2.png) no-repeat; margin-top:0; margin-left: 10px; height:120px;}
#slideshow ul {margin: 0;padding: 0;list-style-type: none;height: 1%; /* IE fix */}
#slideshow ul:after {content: ".";clear: both;display: block;height: 0;visibility: hidden;}
/* SLIDESHOW > SLIDES --------------------------------- */
#slideshow .slides {overflow: hidden; width: 380px;}
#slideshow .slides ul {width: 2880px;}
#slideshow .slides li {width: 380px;float: left; }
#slideshow .slides h2 {margin-top: 0;}

As you can read the main background of the widget is the “offerte” div background and the rest of the nested divs are correctly rendered transparent on firefox and safari. Internet explorer place that black background.

If i set the following css rule you will see the widget background red, in firefox, safari and IE:

ul#sidebar li {background-color: #900;}

If i set this rule to:

ul#sidebar li {background-color: transparent;}

or

ul#sidebar li {background: none;}

I’ve the transparency working only in safari and firefox. Not in Explorer.

Can someone help me as i’m going crazy since today?
I’ve searched a lot in the web without success.

Thank you all!