RadPanelBar Skin Not Working in IE7, Works in IE8

4 posts, 0 answers
  1. Wei Bian
    Wei Bian avatar
    1 posts
    Member since:
    Apr 2009

    Posted 18 Jan 2011 Link to this post

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

     

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. test
    test avatar
    17 posts
    Member since:
    May 2007

    Posted 19 Jan 2011 Link to this post

     

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

     

     

      

     

  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 24 Jan 2011 Link to this post

    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.
Back to Top