bug ie - doubled margin?

[mrblade]

bug ie - doubled margin?

Salve a tutti.
Ho un menu css a lista dentro un div float right e di conseguenza dentro un div float left. Con FF come sempre tutto bene, con IE come sempre tutto male. Mi spiego. Ho un menù diviso per categorie e sottocategorie dove a queste ho impostato un padding-left. Il menù risulta però molto più in basso del normale, come se ci fosse un margin-top. Ho provato a mettere un display:inline e effettivamente il problema viene risolto. Ecco però che ne salta fuori un altro. Il padding-left viene raddoppiato.
Ho provato con diversi hack ma non riesco a trovare la soluzione.
Una cosa strana: togliendo il padding-left viene ugualmente visualizzato :dhò:
Posto il codice.
Se trovate qualche altro errore segnalatemelo. Grazie!! :mame:

HTML:

<div id="wrap">
<div id="content">

<div id="l_sidebar">
blablabla
</div>

<div id="contentmiddle">
blablabla
</div>

<div id="r_sidebar">
<ul>

    <div style="width:100%;">
    
     <div style="float:left; width:50%;" class="leftpad">
       
 <ul>
     <li>
         <ul>

<h2>Channels</h2>
      <div class="mainmenu">
         <div class="maincat">Tecnology</div>                
        <li><a href="#">Software</a></li>
        <li><a href="#">Hack</a></li>
        <li><a href="#">Webmaster</a></li>
        <div style="clear:both"></div>
         <br />

         <div class="maincat">Eros</div>
         <li><a href="#">Eden</a></li>
         <li><a href="#">Celebrity</a></li>
         <li><a href="#">Calendari</a></li>
         <div style="clear:both"></div>
         <br />
                
     </div>
        
            </ul>
          </li>
        </ul> 
      </div>
      
     
      <div style="float:right; width:30%;">
     
     <ul>
        <li>
          <h2>Blogroll</h2>
          <ul>
<li><a href="#">Alex</a></li>
<li><a href="#">Donncha</a></li>
<li><a href="#">Ryan</a></li>

      </ul>
      </li>
   </ul>

                
      </div>  
    </div>
  </ul>
  <div style="height:20px; width:100%; clear:both"></div>



</div>
</div>

<div style="clear:both;"></div>

</div>

<div id="footer">
<div style="clear:both;"></div>
blabla
</div>

CSS:

#wrap { color: #fff;
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;padding: 0;
margin-top:20px;}

#content {width: 960px;
margin: 0 auto;
padding: 0;
}

#contentmiddle {
float: left;
width: 52%;
margin: 20px 0 0 0;
padding: 0px 16px 10px 20px; 
border-right:#CCCCCC 1px solid;}


#l_sidebar {float: left;width: 16%;margin: 0 20px 0 0;padding: 20px 0 20px 0;} ecc ecc...

#r_sidebar {float: right;width: 22%;margin:0;padding: 20px 0 0 0; }
 p{padding: 0px 0 16px 0;margin: 0;}
 ul {list-style: none;margin: 0;padding: 0 0 20px 0; display:inline;}
 ul li {margin: 0;padding: 5px 0 0 0; }
 ul li a {color:;text-decoration: none;}
 ul li a:hover {color: #9198BF;text-decoration: none;}

.mainmenu {font-weight:bold; line-height:12px;}
.mainmenu a { padding-left:8px;}

.maincat {font-size:13px; color:#0099FF; }    

.leftpad a {padding-left:6px;}