[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

menu blocked by scrolling gridview header

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.

.GridHeader
        {
        font-weight: bold;
        color:White;
        background-color:SteelBlue; 
        position:relative; 
        overflow:auto;
        top:expression(this.offsetParent.scrollTop);
        z-index:0; 
        }
      
.Gridpanel 
    {
        position: relative;
        width:98%;
        height:800px;
        overflow: auto;
        margin: 0 auto;
        padding-right: 10px;
    }

.SiteMenu
    {
        z-index:5000;
    }

Open in new window

0
kdeutsch
Asked:
kdeutsch
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
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?
0
 
COBOLdinosaurCommented:
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.
0
 
kdeutschAuthor Commented:
xmediaman:

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
0
 
kdeutschAuthor Commented:
Thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now