Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadPanelBar Skin Not Working in IE7, Works in IE8

3 Answers 55 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Wei Bian
Top achievements
Rank 1
Wei Bian asked on 19 Jan 2011, 12:19 AM
RadPabelBarInIE7.JPG
I used RadPanelBar to create a fancy menu in my web application. I used version 2010 Q2. It works perfectly in ie8. But it does not work in IE7. It looks terrible. Can you please help me to figure out? Here is the skin definition used (again, it works in IE8)

 

 

.RadPanelBar_Simple

 

 

 

.rpRootGroup

 

 

 

 

 

 

 

{

 

 

 

border-color: #999;

 

}

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpTemplate

 

 

 

 

 

 

 

{

 

 

 

color:White;

 

 

 

 

font: normal 11px/20px "Segoe UI", Arial, sans-serif;

 

 

 

 

font-weight:bold;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink

 

 

 

 

 

 

 

{

 

 

 

border-color: #89AEE5;

 

 

 

 

height:22px;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSeparator

 

 

 

 

 

 

 

{

 

 

 

border-top: 1px solid #FFFFFF;

 

 

 

 

height:20px;

 

 

 

 

background-color:#006699;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink .rpText

 

 

 

 

 

 

 

{

 

 

 

border-color: #89AEE5;

 

 

 

 

height:22px;

 

 

 

 

padding: 0px 5px 0px 5px;

 

}

 

 

 

 

 

/* compensate for borders */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpOut

 

 

 

 

 

 

 

{

 

 

 

border-color: #e4e4e4;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded

 

 

 

 

 

 

 

{

 

 

 

border-color: #3d556c;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink:hover,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFocused,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSelected

 

 

 

 

 

 

 

{

 

 

 

color: #892500;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink:hover,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFocused

 

 

 

 

 

 

 

{

 

 

 

background-color: #ff9900;

 

 

 

 

border-color: #c98400;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSelected,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSelected:hover

 

 

 

 

 

 

 

{

 

 

 

background-color: #ffa517;

 

 

 

 

border-color: #ca4b0c;

 

}

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpLink .rpOut,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpFocused .rpOut,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpLink:hover .rpOut,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpSelected .rpOut,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpSelected:hover .rpOut

 

 

 

 

 

 

 

{

 

 

 

padding-bottom: 1px;

 

 

 

 

border-top:solid 1px white;

 

}

 

 

 

 

 

/* <disabled items> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpDisabled,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpDisabled:hover

 

 

 

 

 

 

 

{

 

 

 

color: #bbb;

 

 

 

 

background-color: #e4e4e4;

 

 

 

 

border-color: #999;

 

 

 

 

cursor: default;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpDisabled:hover .rpOut

 

 

 

 

 

 

 

{

 

 

 

border-color: #e4e4e4;

 

}

 

 

 

 

 

/* </disabled items> */

 

 

 

 

 

 

/* <expand arrows> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpandable .rpText,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded .rpText

 

 

 

 

 

 

 

{

 

 

 

background-color: transparent;

 

 

 

 

background-image: url('PanelBar/Expandable.png');

 

 

 

 

background-repeat: no-repeat;

 

}

 

 

 

 

 

/* </expand arrows> */

 

 

 

 

 

 

/* <subitems> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup

 

 

 

 

 

 

 

{

 

}

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpTemplate

 

 

 

 

 

 

 

{

 

 

 

color: white;

 

 

 

 

background-color: transparent;

 

 

 

 

background-image: none;

 

 

 

 

border: 0;

 

 

 

 

margin: 0 -1px;

 

 

 

 

padding: -1px;

 

}

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink:hover,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpFocused,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected:hover

 

 

 

 

 

 

 

{

 

 

 

color: #892500;

 

 

 

 

border: 1px solid #c98400;

 

 

 

 

background-color: #ff9900;

 

 

 

 

padding: 0;

 

}

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected

 

 

 

 

 

 

 

{

 

 

 

background-color: #ffa517;

 

 

 

 

border-color: #ca4b0c;

 

}

 

 

 

 

 

/* <subitems (disabled)> */

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpDisabled,

 

 

 

 

 

 

div.RadPanelBar_Simple

 

 

 

.rpGroup .rpDisabled:hover

 

 

 

 

 

 

 

{

 

 

 

color: #bbb;

 

 

 

 

text-decoration: none;

 

 

 

 

background-color: #fff;

 

 

 

 

border: 0;

 

 

 

 

padding: 1px;

 

}

 

 

 

 

 

/* </subitems (disabled)> */

 

 

 

 

 

 

/* <subitems> */

 

 

 

 

 

 

/* <background positioning> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 0;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFocused,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpLink:hover,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded:hover

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 -200px;

 

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSelected,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpSelected:hover

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 -400px;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpLink,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpExpanded

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 -1px;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpFocused,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpLink:hover

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 -201px;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpSelected,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpFirst .rpSelected:hover

 

 

 

 

 

 

 

{

 

 

 

background-position: 0 -401px;

 

}

 

 

 

 

 

/* <expand arrows> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpandable .rpText,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded .rpText

 

 

 

 

 

 

 

{

 

 

 

padding-right: 20px;

 

 

 

 

background-repeat: no-repeat;

 

}

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpExpandable .rpText,

 

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpExpanded .rpText

 

 

 

 

 

 

 

{

 

 

 

padding-left: 20px;

 

}

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpGroup .rpText

 

 

 

 

 

 

 

{

 

 

 

padding: 0 10px;

 

}

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpandable .rpText { background-position: 100% 0; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpExpanded .rpText { background-position: 100% -176px; }

 

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpExpandable .rpText { background-position: 0 0; }

 

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpExpanded .rpText { background-position: 0 -176px; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpExpandable .rpText { background-position: 100% -338px; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpExpanded .rpText { background-position: 100% -477px; }

 

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpGroup .rpExpandable .rpText { background-position: 0 -338px; }

 

 

 

 

 

 

.RadPanelBar_Simple_rtl

 

 

 

.rpGroup .rpExpanded .rpText { background-position: 0 -477px; }

 

 

 

 

 

 

/* </expand arrows> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink .rpOut { background-position: 0 200px; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink:hover,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpFocused { background-position: 100% -22px; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpLink:hover .rpOut,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpFocused .rpOut { background-position: 0 0; }

 

 

 

 

 

 

/* <subitems (selected)> */

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected .rpOut,

 

 

 

 

 

 

.RadPanelBar_Simple

 

 

 

.rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }

 

 

 

 

 

 

/* </subitems (selected)> */

 

 

 

 

 

 

/* </background positioning> */

 

3 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 19 Jan 2011, 03:24 PM
Hello Wei Bian,

Could you please paste the skin css using Format Code Block tool? It's very difficult to format and test the skin when it's pasted like this. Thank you in advance

All the best,
Yana
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
test
Top achievements
Rank 1
answered on 19 Jan 2011, 04:39 PM

 

.RadPanelBar_Simple .rpRootGroup
{
    border-color: #999;
}
  
  
.RadPanelBar_Simple .rpLink,
.RadPanelBar_Simple .rpTemplate
{
    color:White;
    font: normal 11px/20px "Segoe UI", Arial, sans-serif;
    font-weight:bold;
} 
  
.RadPanelBar_Simple .rpLink
{
    border-color: #89AEE5;
    height:22px;
}
  
.RadPanelBar_Simple .rpSeparator
{
    border-top: 1px solid #FFFFFF;
    height:20px;
    background-color:#006699;
}
  
.RadPanelBar_Simple .rpLink .rpText
{
  
    border-color: #89AEE5;
    height:22px;
    padding: 0px 5px 0px 5px;
}
  
/* compensate for borders */
  
.RadPanelBar_Simple .rpOut
{
    border-color: #e4e4e4;
}
  
.RadPanelBar_Simple .rpExpanded
{
    border-color: #3d556c;
}
  
.RadPanelBar_Simple .rpLink:hover,
.RadPanelBar_Simple .rpFocused,
.RadPanelBar_Simple .rpSelected
{
    color: #892500;
}
  
.RadPanelBar_Simple .rpLink:hover,
.RadPanelBar_Simple .rpFocused
{
    background-color: #ff9900;
    border-color: #c98400;
}
  
.RadPanelBar_Simple .rpSelected,
.RadPanelBar_Simple .rpSelected:hover
{
    background-color: #ffa517;
    border-color: #ca4b0c;
}
  
div.RadPanelBar_Simple .rpLink .rpOut,
div.RadPanelBar_Simple .rpFocused .rpOut, 
div.RadPanelBar_Simple .rpLink:hover .rpOut, 
div.RadPanelBar_Simple .rpSelected .rpOut, 
div.RadPanelBar_Simple .rpSelected:hover .rpOut
{
    padding-bottom: 1px;
    border-top:solid 1px white;
}
  
/* <disabled items> */
.RadPanelBar_Simple .rpDisabled,
.RadPanelBar_Simple .rpDisabled:hover
{
    color: #bbb;
    background-color: #e4e4e4;
    border-color: #999;
    cursor: default;
}
  
.RadPanelBar_Simple .rpDisabled:hover .rpOut
{
    border-color: #e4e4e4;
}
/* </disabled items> */
  
/* <expand arrows> */
.RadPanelBar_Simple .rpExpandable .rpText,
.RadPanelBar_Simple .rpExpanded .rpText
{
    background-color: transparent;
    background-image: url('PanelBar/Expandable.png');
    background-repeat: no-repeat;
}
/* </expand arrows> */
  
/* <subitems> */
.RadPanelBar_Simple .rpGroup
{
      
}
  
div.RadPanelBar_Simple .rpGroup .rpLink,
div.RadPanelBar_Simple .rpGroup .rpTemplate
{
    color: white;
    background-color: transparent;
    background-image: none;
    border: 0;
    margin: 0 -1px;
    padding: -1px;
}
  
div.RadPanelBar_Simple .rpGroup .rpLink:hover,
div.RadPanelBar_Simple .rpGroup .rpFocused,
div.RadPanelBar_Simple .rpGroup .rpSelected,
div.RadPanelBar_Simple .rpGroup .rpSelected:hover
{
    color: #892500;
    border: 1px solid #c98400;
    background-color:  #ff9900;
    padding: 0;
}
  
div.RadPanelBar_Simple .rpGroup .rpSelected
{
    background-color: #ffa517;
    border-color: #ca4b0c;
}
  
/* <subitems (disabled)> */
div.RadPanelBar_Simple .rpGroup .rpDisabled,
div.RadPanelBar_Simple .rpGroup .rpDisabled:hover
{
    color: #bbb;
    text-decoration: none;
    background-color: #fff;
    border: 0;
    padding: 1px;
}
/* </subitems (disabled)> */
  
/* <subitems> */
  
/* <background positioning> */
.RadPanelBar_Simple .rpLink,
.RadPanelBar_Simple .rpExpanded
{
    background-position: 0 0;
}
  
.RadPanelBar_Simple .rpFocused,
.RadPanelBar_Simple .rpLink:hover,
.RadPanelBar_Simple .rpExpanded:hover
{
    background-position: 0 -200px;
      
}
  
.RadPanelBar_Simple .rpSelected,
.RadPanelBar_Simple .rpSelected:hover
{
    background-position: 0 -400px;
}
  
.RadPanelBar_Simple .rpFirst .rpLink,
.RadPanelBar_Simple .rpFirst .rpExpanded
{
    background-position: 0 -1px;
}
  
.RadPanelBar_Simple .rpFirst .rpFocused,
.RadPanelBar_Simple .rpFirst .rpLink:hover
{
    background-position: 0 -201px;
}
  
.RadPanelBar_Simple .rpFirst .rpSelected,
.RadPanelBar_Simple .rpFirst .rpSelected:hover
{
    background-position: 0 -401px;
}
  
/*      <expand arrows> */
.RadPanelBar_Simple .rpExpandable .rpText,
.RadPanelBar_Simple .rpExpanded .rpText
{
    padding-right: 20px;
    background-repeat: no-repeat;
}
  
.RadPanelBar_Simple_rtl .rpExpandable .rpText,
.RadPanelBar_Simple_rtl .rpExpanded .rpText
{
    padding-left: 20px;
}
  
.RadPanelBar_Simple_rtl .rpGroup .rpText
{
    padding: 0 10px;
}
  
.RadPanelBar_Simple .rpExpandable .rpText { background-position: 100% 0; }
.RadPanelBar_Simple .rpExpanded .rpText { background-position: 100% -176px; }
.RadPanelBar_Simple_rtl .rpExpandable .rpText { background-position: 0 0; }
.RadPanelBar_Simple_rtl .rpExpanded .rpText { background-position: 0 -176px; }
  
.RadPanelBar_Simple .rpGroup .rpExpandable .rpText { background-position: 100% -338px; }
.RadPanelBar_Simple .rpGroup .rpExpanded .rpText { background-position: 100% -477px; }
.RadPanelBar_Simple_rtl .rpGroup .rpExpandable .rpText { background-position: 0 -338px; }
.RadPanelBar_Simple_rtl .rpGroup .rpExpanded .rpText { background-position: 0 -477px; }
  
/*      </expand arrows> */
  
.RadPanelBar_Simple .rpGroup .rpLink,
.RadPanelBar_Simple .rpGroup .rpLink .rpOut { background-position: 0 200px; }
  
.RadPanelBar_Simple .rpGroup .rpLink:hover,
.RadPanelBar_Simple .rpGroup .rpFocused { background-position: 100% -22px; }
.RadPanelBar_Simple .rpGroup .rpLink:hover .rpOut,
.RadPanelBar_Simple .rpGroup .rpFocused .rpOut { background-position: 0 0; }
  
/*      <subitems (selected)> */
.RadPanelBar_Simple .rpGroup .rpSelected,
.RadPanelBar_Simple .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
.RadPanelBar_Simple .rpGroup .rpSelected .rpOut,
.RadPanelBar_Simple .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }
/*      </subitems (selected)> */
  
/* </background positioning> */

 

 

  

 

0
Yana
Telerik team
answered on 24 Jan 2011, 02:33 PM
Hi Wei Bian,

I've tested the skin but wasn't able to observe any issue in IE7. Could you please send us screenshots showing the difference in IE7 and IE8? Thanks

All the best,
Yana
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
PanelBar
Asked by
Wei Bian
Top achievements
Rank 1
Answers by
Yana
Telerik team
test
Top achievements
Rank 1
Share this question
or