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

Forums / Designing with Sitefinity / SiteMenu Zindex and white box behind SubMenuItems

SiteMenu Zindex and white box behind SubMenuItems

9 posts, 0 answered
  1. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    27 Apr 2010
    Link to this post
    Hi Telerik,


    1. I am experiencing a problem where the SiteMenu popup/submenuitem appears behind my Silverlight flash content.

    Have applied a custom skin to the menu using the theme folder as per your guidelines. Did try setting very high z-index value to the menu and low z-index on the silverlight content. The only occasion it worked was when I set Silverlight content z-index to -1.

    2. When the submenuitems slide out there is a white box in the background of the submenu item. The way I have skinned the menu is, I have got a div background set and the sitemenu background is set to transparent .

    Please see my problem live on this link http://dalasportsacademy.se.piccolo.binero.se/Hem.aspx.

    I can send you the skin file and site css if required, please provide a mail as I can not attach anything but
    pictures to this thread for now.

    Look forward to solve these 2 problem with your help.

    Thanks
  2. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    27 Apr 2010
    Link to this post
    I forgot to mention the zindex bug occurs on all browsers except IE8.
  3. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 Apr 2010
    Link to this post
    Hi Amir,

    Thank you for contacting Telerik Support.

    1) The problem with the menu is that you have styling rules for its containing elements which are setting the position to relative. Bellow a two of them which upset the menu:
    .main_nav {
    background-image:url("Images/menubg.png");
    background-repeat:no-repeat;
    float:left;
    height:45px;
    left:0;
    margin:8px 0 0;
    padding:0;
    position:relative;
    top:-48px;
    width:960px;
    }

    And for the header class:
    .header {
    margin:0;
    padding:0;
    position:relative;
    }

    You should try styling them without using the relative position rule.

    2) I am not sure I fully understand what is the issue here, would you care to elaborate a little bit more, probably show some screen shots on how it should be.

    Sincerely yours,
    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.
  4. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    27 Apr 2010
    Link to this post
    Hi Radoslav,

    I tried your suggestions but unfortunately it did not resolve our issues.

    Have now submitted a support ticket and attached my project. The ticket nr is: 304539.

    So my issues happen partly in IE8 where there is a transparency issue with the radmenu
    slideout that can be seen over the silverlight content.

    And the zindex issue occurs when I run other browsers like firefox, chrome and safari.

    Regards,

    Amir
  5. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    29 Apr 2010
    Link to this post
    Hello Amir,

    Thank you for getting back to us.

    I have responded to you in the ticket you have submitted. In a nutshell the problem with the menu appearing behind the other element is that the style rules for your CSS classes had position: relative setting. The issue with the menu white box is caused by some style rules in the custom RadMenu skin.

    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.
  6. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    28 Jun 2010
    Link to this post
    Hi,

    The white boxes appear even when I switch to embedded skins of radmenu/sitemenu so it can not be my radmenu skin styles causing it.

    Amir
  7. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    28 Jun 2010
    Link to this post
    Hi,

    I have removed all relative positioning and the radmenu still falls behind the silverlight usercontrol on all browsers except IE8.

    Amir
  8. Amir
    Amir avatar
    14 posts
    Registered:
    18 Apr 2008
    28 Jun 2010
    Link to this post
    Hi again,

    Ok, We have resolved all issues raised in this post, the solution was the good old setting:
    <param name="windowless" value="true" /> (silverlight object)

    Now we are experiencing a difference in the positioning of radmenu/sitemenu it behaves strangely on IE7.
    The div that radmenu is in does not clear so the content after the radmenu div appears on top of the menu.

    Can you at Telerik test our link in IE8 and IE7 too see how we can rectify this?

    Thank you in advance,

    Amir
  9. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    29 Jun 2010
    Link to this post
    Hello Amir,

    Your header conventionally consists of the rows. The first includes logo and illustration and the second includes navigation and search box. The height of the first row is 135px and the height of the second row is 48px.

    The height of the whole header set in ~/App_Themes/Dala%20Sports%20Academy/Site.css around line 148 is 135px. So you need to add 48px to header height (see attachment).

    Let us know if you need further help.


    All the best,
    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
Register for webinar
9 posts, 0 answered