menu blocked by scrolling gridview header

Posted on 2011-10-25
Last Modified: 2012-05-12
I needed my grid header to scroll and found all kinds of css sytlying techniques online whcih work great except for one feature.  My menu that sits at the top of page and sits horizonatal to page goes under the scrolling header and they cannot pick on a menu item.  I tired to z-index it but it still does not work.  Is there a way around this, I need the menu to show over top of it to pick on menu.

        font-weight: bold;
        position: relative;
        overflow: auto;
        margin: 0 auto;
        padding-right: 10px;


Open in new window

Question by:kdeutsch
    LVL 21

    Accepted Solution

    z-index only works with positioned elements. Try adding position: relative; to your .SiteMenu css. If that doesn't work, can you post an example?
    LVL 53

    Expert Comment

    Do you realize that the styling will only work on old IE browsers or current IE browsers in quirks mode. Unless this is for an intranet where all the user are on old versions of IE, most visitors to the page are not going to see the effect, and it might even be broken for many.

    This is what Microsoft has to say about expressions:

    Important  Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode. (For more information about document compatibility modes, see Defining Document Compatibility.) Because Internet Explorer 8 in IE8 mode is fully compliant with the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) standard, most dynamic properties written to work around CSS-related shortcomings in previous versions of Internet Explorer should no longer be needed. Other dynamic properties with more specific uses can generally be replaced with standard JavaScript.

    From:MSDN information site

    You might want to re-think that design if this is for a public web site.  You might want to work out something using  fixed or absolute positioning.

    Author Comment


    Ok that worked and it works better since now my header stays put and does not scroll down page like it did but stays at the top and the grid scrolls under it.  thanks

    Author Closing Comment


    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now