WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Collapsing Pages] No widget title leaves gap in IE (2 posts)

  1. dbohea
    Member
    Posted 5 years ago #

    I'm having a problem with display in IE (what a surprise). If I choose not to have a title for my Collapsing Pages widget it leaves a gap where the title would have been (Firefox sensibly closes the gap where the title would have been).

    I can style the widget title and have tried the following with no success:

    display: none;
    font-size: 0;
    height: 0;

    Does anybody have a solution for closing this gap in IE (6 & 7)? I'd like to avoid a separate IE style sheet if possible.

    Check the following URL for an example of what I'm on about:

    http://avalonaesthetics.co.uk/

    Any help would be much appreciated.

  2. Lukas238
    Member
    Posted 5 years ago #

    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*/
    }

Topic Closed

This topic has been closed to new replies.

About this Topic