~10px gap at the bottom in Internet Explorer

6 posts, 0 answers
  1. John
    John avatar
    16 posts
    Member since:
    Aug 2008

    Posted 15 Apr 2009 Link to this post

    I have a Panel Bar working well except for displaying a gap at the bottom of the menu in IE6, IE7 + IE8 which is about 10-15pixels in height. I've tried everything to get rid of it but I cant. Would appreciate any help in pinpointing the root cause of where this is coming from.

    The Panel bar is contained within a Table td with the following CSS

    table.MasterPage td.NavigationBar
    {
      padding:0px;
      margin:0px;
      background-color:#e6e6e6;
    }:

    The Panel Bar Skin is pasted below:

    /* RadPanelBar SoftexPanelBar skin */

    .RadPanelBar_SoftexPanelBar
    {
        background-color:White;
        font: normal 11px Arial, Verdana, Sans-serif;        
        white-space:normal;
        min-height:150px;
        margin:0px;
        padding:0px;
    }

    .RadPanelBar_SoftexPanelBar .rpLink
    {
      line-height:32px;
      font-weight:normal;
    }

    .RadPanelBar_SoftexPanelBar .rpRootGroup .rpLink
    {
        background: #566397;
        color: White;    
        margin-bottom:1px;
        font-weight:normal;
      text-decoration:none;
    }

    .RadPanelBar_SoftexPanelBar .rpRootGroup .rpExpanded,
    .RadPanelBar_SoftexPanelBar .rpRootGroup .rpSelected
    {
        background: #18024D;
        font-weight:bold;
    }

    /* span class="text" */

    .RadPanelBar_SoftexPanelBar .rpRootGroup .rpLink:hover
    {
        font-weight:bold;
    }


    .RadPanelBar_SoftexPanelBar .rpRootGroup .rpImage
    {
      padding-left:10px;
      padding-top:8px;
    }

    /* child item link */

    .RadPanelBar_SoftexPanelBar .rpLevel1 .rpImage
    {
      padding-left:20px;
    }

    .RadPanelBar_SoftexPanelBar .rpLevel1 .rpLink
    {
        background: #A7ADCD;
        color:#18024D;
        font-weight:normal;
        text-decoration:none;        
    }

    .RadPanelBar_SoftexPanelBar .rpLevel2 .rpImage
    {
      padding-left:30px;
    }

    .RadPanelBar_SoftexPanelBar .rpLevel2 .rpLink
    {
        background: #BFC7FF;
        color:#18024D;        
    }

    .RadPanelBar_SoftexPanelBar .rpLevel3 .rpImage
    {
      padding-left:40px;
    }

    .RadPanelBar_SoftexPanelBar .rpLevel3 .rpLink
    {
        background: #D3DEFF;
        color:#18024D;        
        font-weight:normal;
        text-decoration:none;
    }

    .RadPanelBar_SoftexPanelBar .rpLevel4 .rpImage
    {
      padding-left:50px;
    }

    .RadPanelBar_SoftexPanelBar .rpLevel4 .rpLink
    {
        background: #DDF3FF;
        color:#18024D;        
    }

    /* logout */

    .RadPanelBar_SoftexPanelBar .rpRootGroup .Logout
    {
      background:white;
      color:#666666;
      border-top:solid 1px #566397;
    }

    .RadPanelBar_SoftexPanelBar .rpRootGroup .Logout:hover
    {
      background:white;
      font-weight:bold;
    }

    /* Bottom level */

    .RadPanelBar_SoftexPanelBar .rpRootGroup .Last
    {
      color:#666666;
      line-height:20px;
      height:0px;
      margin-bottom:0px;
      padding-bottom:0px;
    }

    .RadPanelBar_SoftexPanelBar .rpRootGroup .Last:hover
    {
      background:none;
      font-weight:bold;
      color:#566397;
    }

    .RadPanelBar_SoftexPanelBar .rpRootGroup .Last .rpImage
    {
      padding-top:3px;
    }



  2. John
    John avatar
    16 posts
    Member since:
    Aug 2008

    Posted 16 Apr 2009 Link to this post

    This is obviously a bug in the control. Can someone please suggest a way to remove this unwanted 10px gap below the PanelBar? I believe it's to do with rpLast but even setting it to display:none does nothing.

  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Apr 2009 Link to this post

    Hi John,

    Unfortunately I couldn't reproduce your issue with information you sent me. There were only a few pixel gaps between the root items. You can remove them with the following rules:
    div.RadPanelBar .rpOut,
    div.RadPanelBar .rpFocused .rpOut,
    div.RadPanelBar .rpSelected .rpOut,
    div.RadPanelBar .rpLink .rpOut,
    div.RadPanelBar .rpLink:hover .rpOut
    {
        padding: 0;
        border: 0;
    }

    div.RadPanelBar .rpRootGroup .rpLink
    {
        border: 0;
    }

    I can be able to tell you more about the 10px gap you report if you send me a sample project or a live URL demonstrating the issue.

    Kind regards,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. John
    John avatar
    16 posts
    Member since:
    Aug 2008

    Posted 17 Apr 2009 Link to this post

    How can I send it to you? I've exhausted all potential solutions for this myself and would value your help.

    The 1 pixel gaps are deliberate as the background colour is white.

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 19 Apr 2009 Link to this post

    Hello John,

    It seems to me that the gap is caused by whitespace after the control - a simple way to figure this out will be to set a border around the panelbar and see whether the gap is within or outside the border. It it's outside, remove everything after the panelbar and the closing tag of its' container.

    In any way, you can open a support ticket and send the files for your project, so that we can find the problem.

    Greetings,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. John
    John avatar
    16 posts
    Member since:
    Aug 2008

    Posted 20 Apr 2009 Link to this post

    Hello,

    Thanks for your reply. The gap was inside the border but I've tracked it down to a sitemapnode that had an empty title, it was only there to allow users to access a certain page but we dont want to display it in the menu.

    I worked around it by programmatically removing the item from the list before databinding it.

    Thanks,
    John
Back to Top