SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Does anyone know how to reduce the space above the ribbon in the standard SharePoint 2010 masterpage (see image below)

There are a bunch of assorted classes and divs all over the place, but none seem to explicitly set the height (or even a min-height), it looks to be governed by something else.

Anyone else had luck with this?

enter image description here

share|improve this question
up vote 3 down vote accepted

I can see why you're trying to remove the "white space". BUT, this is no white space. It's used by the Ribbon for the contextual tab groups, so I do not recommend that you get rid of it! What's the reason to hide it?

share|improve this answer
... well spotted, I hadn't thought of that. Now I've a good reason to tell the client why not to reduce it. Cheers :) – James Love May 29 '11 at 9:45

I don't have the details available right now, but there are scripts which drive much of the top of the SharePoint 2010 screen. Those scripts regularly reset various attributes of elements to keep them sized and behaving certain ways. This means that you need to understand not just the CSS which is applied, but also the script which operates on the elements.

share|improve this answer
Spot on, there's also the risk that if you're letting SharePoint manage your scrolling, adding something like a negative top margin on the body may affect the way that script calculates the scrolling. – webdes03 Oct 7 '11 at 14:17
That's a fair point, actually. I assumed doing something simple like a negative top margin would avoid messing around with all the different classes actually inside the ribbon, but it may well affect something more fundamental. (It does seem to work, though!) – Rawling Oct 7 '11 at 14:21
Obviously I haven't tested it, but I believe the script that handles the scrolling looks at the height of the body against the other baseline elements. I "believe" IE ignores anything that's a negative margin outside the body, but other standards compliant browsers may not. I just assumed it would be inconsistent or inaccurate in different browsers, but as I said, I haven't tested it. – webdes03 Oct 7 '11 at 14:46


share|improve this answer
While this may theoretically answer the question, we prefer inclusion of the essential parts of the answer here, and to provide the link for reference. See answer for general guidelines. Also, since this seems to be your own site, please see May I promote products or websites I am affiliated with here? for guidelines. – SPDoctor Dec 16 '11 at 19:05

Just add body{margin-top: -19px;} to your CSS somewhere. That pushes much of the blank space past the top of the viewport - including the title of each contextual tab group, but leaving enough to tell that the tabs are grouped.

You may also need something like .ms-cui-TabRowRight{margin-top:19px;} - I know I did, but my tabrowright was quite heavily customised.

(This is kinda meant as a joke answer, but if you really want to reduce the height the ribbon eats this is a quick and easy (and did I mention horrible and dirty?) way to save 19px.)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.