+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Styling the SiteMenu, Issues with IE6/IE7

Styling the SiteMenu, Issues with IE6/IE7

7 posts, 0 answered
  1. John Mark Mikhail
    John Mark Mikhail avatar
    4 posts
    Registered:
    07 May 2008
    19 Mar 2010
    Link to this post
    Hi,

    I'm having some CSS issues with my SiteMenu with IE6 and IE7. Everything looks good in FF and Chrome. I was hoping you could guide me to the issue.

    Attached are the images which show the differences.

    Any help would be appreciated.

    Thanks
    John
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    19 Mar 2010
    Link to this post
    Hello John Mark Mikhail,

    Could you give us a live link to the website so we could observe the css classes applied?

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. John Mark Mikhail
    John Mark Mikhail avatar
    4 posts
    Registered:
    07 May 2008
    19 Mar 2010
    Link to this post
    Unfortunately, the site is an internal only site not accessed outside of our network. So I've include the code of the file that its referring to.

    Thanks
    John

    /* <RadMenu / Simple> */
     
    .RadMenu_CCS ul.rmRootGroup,
    .RadMenu_CCS div.rmRootGroup
    {
        border: 1px solid #ccc;
        background-color: #eff0f1;
    }
     
    /* <Root items> */
     
    .RadMenu_CCS,
    .RadMenu_CCS .rmLink
    {
        font: normal 12px/19px Arial, Helvetica, sans-serif;
        color: #ffffff;
        text-decoration: none;
    }
     
    .RadMenu_CCS .rmItem .rmLink
    {
        padding: 1px 0 1px 12px;
    }
     
    .RadMenu_CCS .rmHorizontal .rmItem
    {
        padding: 2px 0;
    }
     
    .RadMenu_CCS_rtl .rmItem .rmLink
    {
        padding: 1px 12px 1px 0;
    }
     
    .RadMenu_CCS .rmVertical .rmItem .rmLink
    {
        padding: 1px 12px;
    }
     
    div.RadMenu_CCS_rtl .rmHorizontal .rmText
    {
        padding: 0 0 1px 12px;
    }
     
    .RadMenu_CCS .rmVertical .rmItem .rmLink .rmText
    {
        border-bottom: 1px solid #CCC;
        border-right: 0;
    }
     
    .RadMenu_CCS .rmHorizontal .rmItem .rmLink .rmText
    {
        border-bottom: 0;
        border-right: 1px solid #CCC;
    }
     
    .RadMenu_CCS_rtl .rmHorizontal .rmItem .rmLink .rmText
    {
        border-bottom: 0;
        border-right: 0;
        border-left: 1px solid #CCC;
    }
     
    .RadMenu_CCS .rmVertical .rmLast .rmLink .rmText
    {
        border-bottom: 0;
        border-right: 0;
        padding-bottom: 1px;
    }
     
    .RadMenu_CCS .rmHorizontal .rmLast .rmLink .rmText
    {
        border-right: 0;
        border-bottom: 0;
    }
     
    .RadMenu_CCS_rtl .rmHorizontal .rmLast .rmLink .rmText
    {
        border-left: 0;
        border-bottom: 0;
    }
     
    .RadMenu_CCS .rmItem .rmLink:hover,
    .RadMenu_CCS .rmItem .rmFocused,
    .RadMenu_CCS .rmItem .rmSelected,
    .RadMenu_CCS .rmItem .rmExpanded,
    .RadMenu_CCS .rmItem .rmExpanded:hover
    {
        color: #000;
    }
     
    .RadMenu_CCS .rmItem .rmDisabled,
    .RadMenu_CCS .rmItem .rmDisabled:hover
    {
        color: #BBB;
        background-color: transparent;
        border: 0;
    }
     
    .RadMenu_CCS img.rmLeftImage
    {
        margin: 2px 2px 0 0;
        padding-bottom: 1px;
    }
     
    /* </Root items> */
     
     
    /* <Submenu items> */
     
    div.RadMenu .rmRootGroup .rmItem .rmGroup
    {
        padding-bottom: 0;
    }
     
    div.RadMenu .rmRootGroup .rmItem .rmVertical
    {
        padding-top: 5px;
        padding-bottom: 5px;
    }
     
    .RadMenu_CCS .rmGroup,
    .RadMenu_CCS .rmMultiColumn,
    .RadMenu_CCS .rmGroup .rmVertical
    {
        border: 1px solid #c4c4c4;
        background: #fff;
    }
     
    .RadMenu_CCS .rmGroup .rmHorizontal
    {
        background: #fff;
    }
     
    .RadMenu_CCS .rmGroup .rmItem .rmLink
    {
        padding: 1px;
        margin: 1px 2px;
        line-height: 16px;
    }
     
    .RadMenu .rmGroup .rmItem .rmLeftImage
    {
        margin: 2px 0 0 6px;
    }
     
    * html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; }
    *+html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; }
     
    .RadMenu_CCS .rmGroup .rmItem .rmLink
    {
        color: #ffffff;
    }
     
    .RadMenu_CCS .rmGroup .rmItem .rmLink:hover
    {
        color: #002bb8;
    }
     
    .RadMenu_CCS .rmGroup .rmItem .rmFocused,
    .RadMenu_CCS .rmGroup .rmItem .rmFocused:hover,
    .RadMenu_CCS .rmGroup .rmItem .rmSelected,
    .RadMenu_CCS .rmGroup .rmItem .rmSelected:hover,
    .RadMenu_CCS .rmGroup .rmItem .rmExpanded,
    .RadMenu_CCS .rmGroup .rmItem .rmExpanded:hover
    {
        color: #000;
    }
     
    .RadMenu_CCS .rmGroup .rmItem .rmDisabled,
    .RadMenu_CCS .rmGroup .rmItem .rmDisabled:hover
    {
        color: #BBB;
    }
     
    .RadMenu_CCS .rmGroup .rmItem .rmLink .rmText
    {
        padding-right: 53px;
        border: 0;
    }
     
    .RadMenu_CCS .rmGroup .rmHorizontal .rmLink .rmText
    {
        padding-right: 20px;
        border-right: 1px solid #CCC;
    }
     
    div.RadMenu_CCS_rtl .rmGroup .rmHorizontal .rmLink .rmText
    {
        padding-right: 10px;
        padding-left: 20px;
        border-right: 0;
        border-left: 1px solid #CCC;
    }
     
    .RadMenu_CCS .rmGroup .rmHorizontal .rmLast .rmLink .rmText
    {
        border-right: 0;
    }
     
    .RadMenu_CCS_rtl .rmGroup .rmHorizontal .rmLast .rmLink .rmText
    {
        border-left: 0;
    }
     
    .RadMenu_CCS .rmGroup .rmExpandRight,
    .RadMenu_CCS .rmGroup .rmExpandLeft,
    .RadMenu_CCS .rmTopArrow,
    .RadMenu_CCS .rmBottomArrow,
    .RadMenu_CCS .rmLeftArrow,
    .RadMenu_CCS .rmRightArrow
    {
        background: transparent url('Menu/rmExpandArrows.png') no-repeat;
    }
     
    .RadMenu_CCS .rmGroup .rmExpandRight { background-position: 100% -2px; }
    .RadMenu_CCS .rmGroup .rmExpandLeft { background-position: 0 -50px; }
    .RadMenu_CCS .rmLink:hover .rmExpandRight,
    .RadMenu_CCS .rmFocused .rmExpandRight,
    .RadMenu_CCS .rmSelected .rmExpandRight,
    .RadMenu_CCS .rmExpanded .rmExpandRight { background-position: 100% -26px; }
    .RadMenu_CCS .rmLink:hover .rmExpandLeft,
    .RadMenu_CCS .rmFocused .rmExpandLeft,
    .RadMenu_CCS .rmSelected .rmExpandLeft,
    .RadMenu_CCS .rmExpanded .rmExpandLeft { background-position: 0 -74px; }
     
    .RadMenu_CCS .rmTopArrow,
    .RadMenu_CCS .rmBottomArrow,
    .RadMenu_CCS .rmLeftArrow,
    .RadMenu_CCS .rmRightArrow
    {
        background-color: #fff;
    }
     
    .RadMenu_CCS .rmTopArrow
    {
        border-bottom: 1px solid #CCC;
        background-position: 50% -95px;
    }
     
    .RadMenu_CCS .rmBottomArrow
    {
        border-top: 1px solid #CCC;
        background-position: 50% -109px;
    }
     
    .RadMenu_CCS .rmLeftArrow
    {
        border-right: 1px solid #CCC;
        background-position: 50% -48px;
    }
     
    .RadMenu_CCS .rmRightArrow
    {
        border-left: 1px solid #CCC;
        background-position: 50% 1px;
    }
     
    div.RadMenu_CCS .rmHorizontal .rmSeparator,
    div.RadMenu_CCS .rmSeparator .rmText
    {
        padding: 0;
    }
     
    div.RadMenu_CCS .rmHorizontal .rmSeparator .rmText
    {
        padding: 3px 0;
        margin: 0;
    }
     
    .RadMenu_CCS .rmHorizontal .rmVertical .rmSeparator .rmText
    {
        padding: 0;
    }
     
    div.RadMenu_CCS .rmVertical li.rmSeparator .rmText,
    div.RadMenu_CCS .rmHorizontal .rmVertical li.rmSeparator .rmText
    {
        background: #CCC;
        padding-bottom: 1px;
        margin: 1px 0;
    }
     
    *+html div.RadMenu_CCS .rmVertical li.rmSeparator .rmText,
    *+html div.RadMenu_CCS .rmHorizontal .rmVertical li.rmSeparator .rmText
    {
        background: transparent;
        padding-bottom: 0;
        border-bottom: 1px solid #CCC;
        margin: 0;
    }
     
    * html div.RadMenu_CCS .rmVertical li.rmSeparator .rmText,
    * html div.RadMenu_CCS .rmHorizontal .rmVertical li.rmSeparator .rmText
    {
        padding-top: 1px;
        padding-bottom: 0;
        margin: 0;
    }
     
    .RadMenu_CCS .rmVertical .rmSeparator
    {
        margin-top: -3px;
        background-color: #eff0f1;
        z-index: 6;
        position: relative;
        line-height: 0;
        font-size: 0;
    }
     
    *+html .RadMenu_CCS .rmVertical .rmSeparator
    {
        margin-top: -2px;
    }
     
    * html .RadMenu_CCS .rmVertical .rmSeparator
    {
        margin-top: -2px;
    }
     
    .RadMenu_CCS .rmRootGroup .rmVertical .rmSeparator
    {
        margin-top: auto;
        background-color: transparent;
        position: static;
    }
     
    .RadMenu_CCS .rmHorizontal .rmSeparator
    {
        margin-left: -2px;
        background-color: #eff0f1;
        z-index: 6;
        position: relative;
    }
     
    .RadMenu_CCS_rtl .rmHorizontal .rmSeparator
    {
        margin-left: auto;
        margin-right: -2px;
    }
     
    .RadMenu_CCS .rmHorizontal .rmVertical .rmSeparator
    {
        margin-left: 5px;
        margin-right: 5px;
    }
     
    .RadMenu_CCS_Context .rmGroup .rmSeparator
    {
        background: transparent;
        margin-top: 0;
    }
     
    .RadMenu_CCS .rmHorizontal li.rmSeparator .rmText,
    .RadMenu_CCS .rmVertical .rmHorizontal li.rmSeparator .rmText
    {
        background: #CCC;
        width: 1px;
        margin-left: 1px;
    }
     
    .RadMenu_CCS .rmVertical .rmVertical li.rmSeparator .rmText,
    .RadMenu_CCS .rmHorizontal .rmVertical li.rmSeparator .rmText
    {
        background: #dee2e7;
        margin: 0 2px 0 7px;
    }
     
    *+html .RadMenu_CCS .rmVertical .rmVertical li.rmSeparator .rmText,
    *+html .RadMenu_CCS .rmHorizontal .rmVertical li.rmSeparator .rmText
    {
        background: transparent;
        border-bottom: #dee2e7;
        margin: 0 2px 0 7px;
    }
     
    .RadMenu_CCS .rmHorizontal .rmHorizontal li.rmSeparator .rmText,
    .RadMenu_CCS .rmVertical .rmHorizontal li.rmSeparator .rmText
    {
        background: #dee2e7;
        width: 1px;
        margin-left: 1px;
    }
     
    /* <rtl> */
     
    .RadMenu_CCS_rtl .rmGroup .rmItem .rmLink .rmText
    {
        padding-left: 53px;
        padding-right: 27px;
    }
     
    .RadMenu_CCS_rtl .rmGroup .rmHorizontal .rmLink .rmText
    {
        padding-left: 10px;
        padding-right: 9px;
    }
     
    /* </rtl> */
     
    .RadMenu_CCS .rmScrollWrap .rmVertical
    {
        border: 0;
    }
     
    /* </RadMenu / Simple> */
     
     
     
     
     
    div.RadMenu_CCS {  }
    div.RadMenu_CCS .rmRootGroup { border-color: transparent; background-color: rgb(78, 139, 190); }
    div.RadMenu_CCS .rmItem .rmLink { background-color: rgb(78, 139, 190); color: rgb(255, 255, 255); }
    div.RadMenu_CCS .rmItem .rmLink .rmText {  }
    div.RadMenu_CCS .rmItem .rmLink:hover {  }
    div.RadMenu_CCS .rmItem .rmLink:hover .rmText {  }
    div.RadMenu_CCS .rmItem .rmLink .rmExpandDown {  }
    div.RadMenu_CCS .rmItem .rmExpanded {  }
    div.RadMenu_CCS .rmItem .rmExpanded .rmText {  }
    div.RadMenu_CCS > .rmVertical .rmLink .rmExpandRight {  }
    div.RadMenu_CCS .rmItem .rmExpanded {  }
    div.RadMenu_CCS .rmItem .rmExpanded .rmText {  }
    div.RadMenu_CCS .rmItem .rmDisabled {  }
    div.RadMenu_CCS .rmItem .rmDisabled .rmText {  }
    div.RadMenu_CCS .rmItem .rmGroup { border-color: transparent; background-color: rgb(78, 139, 190); }
    div.RadMenu_CCS .rmGroup .rmItem .rmLink {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmLink .rmText {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmLink:hover { color: rgb(68, 68, 68); }
    div.RadMenu_CCS .rmGroup .rmItem .rmLink:hover .rmText {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmLink .rmExpandRight {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmExpanded {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmExpanded .rmText {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmDisabled {  }
    div.RadMenu_CCS .rmGroup .rmItem .rmDisabled .rmText {  }

  4. John Mark Mikhail
    John Mark Mikhail avatar
    4 posts
    Registered:
    07 May 2008
    22 Mar 2010
    Link to this post
    While trying to troubleshoot the issue, I discovered that if I disable the EnableEmbeddedBaseStylesheet property in the SiteMenu, the behavior in FF and Chrome revert to what is happening in IE6. It's almost as if IE6 and IE7 are not applying the base stylesheet.

    Am I on the right track when trying to solve the issue?

    Thanks
    John
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    23 Mar 2010
    Link to this post
    Hello John Mark Mikhail,

    Yes, I recommend that you turn the embedded stylesheets off and make the menu look the same at all browsers using the same CSS (without any hackes). If you encounter any problems I will need your master page (~/App_Master), your site theme (~/App_Themes) and the CSS for the menu in order to be able to help you.

    Greetings,
    Katia
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. John Mark Mikhail
    John Mark Mikhail avatar
    4 posts
    Registered:
    07 May 2008
    23 Mar 2010
    Link to this post
    I think I can fix most of the issues, the only thing that stands out is the flyouts.

    Without the embedded stylesheets, the submenu items open below the root item rather than to the right.

    Is that functionality in the skin?

    Thanks
    John
  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    23 Mar 2010
    Link to this post
    Hello John Mark Mikhail,

    Thank you for getting back to us.

    The base style sheets are common styles for the particular RadControl which are not in the skin. In order to function properly the RadControls need their base style sheets and base scripts. The option to disable those resources from loading is there if you wish to load them manually by adding them as script references to ScriptManager or style sheet reference to the RadStyleSheetManager. For more information, please check out: Disabling embedded resources

    You can obtain the base style sheets and javascripts if you download a trial version of the RadControls for ASP.NET AJAX.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
7 posts, 0 answered