lukas238

I find a solution.

The problem is in the order the CSS is executed.

So you set to display: none the widget title, the persistent space you see is the h2 you just remove, but for some reason IE don’t re-adjust the li height like Firefox do.

So you need to made make clear to IE that you want the li elements to be flexible. So here is the code:

<div id="sidebar">
  <ul>
    <li id="pages" class="widget widget_pages">
      <h2 class="widgettitle">Pages</h2>
      <ul>
        <li class="page_item page-item-1">menu item</li>
        <li class="page_item page-item-2">menu item</li>
        <li class="page_item page-item-3">menu item</li>
      </ul>
    </li>
    <li id="meta" class="widget widget_meta">
      <h2 class="widgettitle">Meta</h2>
      <ul>
        <li class="page_item page-item-1">meta item</li>
        <li class="page_item page-item-2">meta item</li>
        <li class="page_item page-item-3">meta item</li>
      </ul>
    </li>
  </ul>
</div>

First we remove the widget title:

#sidebar .widgettitle{
	display: none;
}

Now we make IE adjust automatically the hight of the li (every li in this example).

#sidebar li{
	height: 100%; /*IE6 fix*/
	line-height: 1.2em; /*Make the list look equal in FF and IE*/
}