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

Forums / Developing with Sitefinity / Site Menu overlap

Site Menu overlap

4 posts, 0 answered
  1. Rich
    Rich avatar
    2 posts
    Registered:
    08 Jul 2008
    05 Jan 2009
    Link to this post
    Hello,

    I have a SiteMenu which does some strange overlapping of other page elements, and I'm hoping someone can help.

    • - The first issue is the SiteMenu overlaps the lightbox on the built-in Image Gallery (click here and select an image to see what I mean).

    • - The second issue is that the same SiteMenu goes behind a Flash object (click here and rollover the "Band" nav item to see what I mean).

    The SiteMenu and ImageGallery are completely out-of-the-box (I haven't changed any of the code or CSS). Does anyone have any recommendations on how to resolve both of these issues?

    Thanks!
  2. Richard Baugh
    Richard Baugh avatar
    201 posts
    Registered:
    22 Aug 2012
    05 Jan 2009
    Link to this post
    For the flash object, you need to add "wmode=transparent" to the object tag. This will allow the menu to display over the flash object.

    As for the menu displaying on top of the lightbox, the menu has a zindex of 7000. This is forcing it to have a higher layer order which is rendering on top of the lightbox. If you have added this, then you will need to set this to a lower value, or you will need to increase the value of the zindex for the lightbox. This would more than likely be done in the javascript file.

    Hope this helps.
  3. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    06 Jan 2009
    Link to this post
    Hello Rich,

    Richard is absolutely right. I will just try to explain the solutions in greater details.

    To fix the first issue please open ~/Sitefinity/ExternalLibraries/lightbox/css/lightbox.css file and increase the z-index of the lightbox (the value should be greater than 7000):

    #lightbox
        positionabsolute
        left: 0; 
        width: 100%; 
        z-index: 7100; 
        text-aligncenter
        line-height: 0; 
        } 
     

    Regarding the second problem you could try to set the wmode attribute of the Flash to opaque (preferably) or transparent i.e you need to add the following attribute to the Embed tag:

    <embed ... wmode="opaque" ...> 

    Do let us know if this helps.

    Greetings,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  4. Rich
    Rich avatar
    2 posts
    Registered:
    08 Jul 2008
    06 Jan 2009
    Link to this post
    Excellent!  Both suggestions solved both problems.  Thanks everyone!

    Rich
Register for webinar
4 posts, 0 answered