0

Im hoping someone could help me with some CSS to control the very top Ribbon bar. I have a 2010 enviroment which I inherited, and there are some elements which dont appear correctly.

Notice the 'Browse', 'Documents' and 'Library' buttons all being to narrow to display the full title. Notice the 'Browse', 'Documents' and 'Library' buttons all being to narrow to display the full title.

The same happens on all pages, Lists and Libraries, and the width appears fixed. enter image description here

The site does have alot of custom CSS placed in many areas, and hasn't been organised very well, so I'm really struggling to find the CSS that controls these elements, I've also used Chrome and Firebug to inspect the elements but find nothing to control its width, so my only conclusion is that they have been removed entirely/

Can anyone point me in the right direction, does anyone know what controls and classes I can sue to fix this?

Thanks.

Improve this question

2 Answers 2

Reset to default
0

Check this out:

.ms-cui-tt, .ms-cui-cg {
width: 60px !important;
}

.ms-browseTab.ms-cui-tt-s > a.ms-cui-tt-a {
width: 99% !important;
}

I would generally look for the css property breaking my stuff using Chrome Dev Tools - try to locate the root element of the menu, in our case it would be:

<ul unselectable="on" role="tablist" class="ms-cui-tts">

Then I'd try to walk down through every element inside it and manually unclicking any custom css properties, seeing if this makes any difference. Otherwise I could just try to force the width to be normal by overriding the custom css properties.

Improve this answer
3
  • Hi Rafal, thanks for the time. That has increased the space between the buttons, but not the actual tab buttons or labels themselves. screenshot here dl.dropboxusercontent.com/u/3213166/screen4.png
    – j0rdan
    Commented Dec 6, 2013 at 14:34
  • Jordan, I have edited my answer. Can you take a look?
    – Rafał Saltarski
    Commented Dec 6, 2013 at 14:50
  • Thats great, thank Rafal. Your code fixed the Browse tab and then put me in the right direction to fix the rest. here is my final css code dl.dropboxusercontent.com/u/3213166/screen6.png thanks again for the help Rafal.
    – j0rdan
    Commented Dec 6, 2013 at 16:28
0

I tried to reproduce your css error, and I found that the responsible party is the span contaned into the tab.

enter image description here

Tab widht is inherited from the span <span class="ms-cui-tt-span" unselectable="on">Items</span>

check the padding propertie of the ms-cui-tt-span by default it's padding: 4px 10px 4px;

Improve this answer
1
  • Thanks for the input Nizar, I looked through all that already and my defaults where all correct. I still dont know where the bad css is, as I said, I inherited this system and the previous person just modified the system level master pages as and when he wanted to change something, so its hard to track down, but Ive managed to create a fix for it now with Rafals help.
    – j0rdan
    Commented Dec 6, 2013 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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