WordPress.org

1. dbohea
   Member
   Posted 1 year 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 8 months 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.