~10px gap at the bottom in Internet Explorer

[John]

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;
}

[John]

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.

[Kamen Bundev]

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.

[John]

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.

[Alex Gyoshev]

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.

[John]

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