SharePointlessness Rotating Header Image

SharePoint 2010 Branding & Design:Begin at the Beginning

There are so many blog posts running around in my head at the moment that I am struggling how to start this first one out.  I am simply going to go back to my third grade teacher who once told me, “Just Begin at the Beginning” when I was excited one day to tell her a story. So here goes…

SharePoint 2010 Branding and Design is a wondrous world full of new ideas and new challenges. But what does this mean to those of us who design sites to make SharePoint look not like SharePoint? It simply means that we are beginning a new adventure and will learn many lessons along the way.

In the past months I have been on a crazy journey of speaking engagements and conferences. But in the midst of all of this I have been in the trenches working on new SharePoint 2010 branding for clients as well.  In this process I have encountered a few things that really made me scratch my head.

SharePoint Cat and the Raiders of the Lost Ark … Problems with the z-index

Today in Lesson #1 we are going to talk about just one of the small things that has driven me up the wall trying to track down, but in the end once found just made me sit back and think, well that was simple but it still doesn’t make sense why it must work this way.

What do you do when you have a site all redesigned and one element, in this case it was the Welcome Menu dropdowns that just don’t work the right way? The menu items were dropping down behind another element on the page. It just isn’t right I tell you.

So in digging around, looking at custom CSS classes and my custom Master Page I started my quest. I really did kind of feel like Indiana Jones in the Raiders of the Lost Ark as the movie starts and he is running from the giant boulder that threatens to crush our star while he is searching for the golden statue.

I examined the Welcome menu, all seemed to be in place, I checked the Z-index css class and made sure that element was set to display above other items. So what could this problem be. Next option, check the z-index on the other css classes of the Welcome Menu itself.

You see, the z-index and SharePoint 2010 and internet explorer have known issues. Their sessions with a therapist have not been successful yet, in fact they may be headed towards a divorce, they are already separated.

But there has to be a solution to this Welcome Menu dropdown problem that is simple and in my sleep deprived brain I am just not making the easy connection. After much debate and trying to change the z-index out on each element I finally locate the solution. I grabbed the golden statue and ran for the exit.

But wait, what exactly was the solution you ask? Well, you simply have to find the <div> that is the outer container for the element that you were looking to set a z-index on. In my case the <div> was the custom right top menu that contained the search component, the social notifications, and the welcome menu. Once I added a higher z-index on this element, for me I set z-index:9999 it worked perfectly. No more dropdown problems.

This is just the first of many issues with z-index and SharePoint 2010, but I wanted to share this one first as it is a simple fix that we can reuse many times in the future.

4 Comments

  1. suhail says:

    Hi Cathy,

    Thanks a lot for your post. After reading it i got an answer for my problem.

  2. Tim says:

    I quite literally just ran head first into the same problem on a project. You just saved me hours of chasing my tail.

  3. Jonathan says:

    Dear Cathy,

    I ran into a similar issue and had to set a z-index value in my CSS in .s4-tn to keep my Top Navigation from hiding behind a custom web part. It worked great, but then…

    The drop-down menu from the Title Area (like when you are browsing a document library) is now dropping behind the Top Nav. I tried applying a greater z-index value in the containing that area, but it didn’t work for me. Any advise?

    Thanks for blogging!

    Jonathan

  4. Colin says:

    This didnt work for me, my drop down menus and fly out menus are all hidden behind an open list in data sheet view. Standard view is fine. I understand this maybe due to Activex being used to render the DS view?

    Any suggestions would be most helpful :)

    Colin

Leave a Reply