Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Re 66.0.2 Tabs are on bottom but project ~1/3 down from background, into usable screen, blocking tab titles.

  • 9 replies
  • 1 has this problem
  • 42 views
  • Last reply by jYOW

more options

Managed to get Tabs on Bottom in all previous updates (including FF65). Carried over ToB with FF66.0.2 update, but the whole line of tabs (including vertical separators) has shifted down about 1/3 of its height such that it bleeds into the immediate viewable screen. If the top of that viewable screen is black, for example, the tab titles are almost unreadable. Any advice? Appreciated.

Managed to get Tabs on Bottom in all previous updates (including FF65). Carried over ToB with FF66.0.2 update, but the whole line of tabs (including vertical separators) has shifted down about 1/3 of its height such that it bleeds into the immediate viewable screen. If the top of that viewable screen is black, for example, the tab titles are almost unreadable. Any advice? Appreciated.
Attached screenshots

Chosen solution

Hello cor-el,

I managed to get the tabs on bottom as well as lined up with their background bar using a "Windows" (!) solution for my MAC:

http://bragonx.wixsite.com/bhxx/firefox-tabs-on-bottom-v65andhigher

One question though - could you direct me to a Mozilla page where I could at least learn to start NAMING the various bars properly?

Thanks

Read this answer in context 👍 0

All Replies (9)

more options

Where did you get your current set of style rules to move the tab bar? I suggest going back to the source to see whether an update is available. (I don't have rules for MacOS, sorry.)

more options

Newbie here. Presume "style rules" relates to method used to force Tabs on Bottom. Over time, and each time it was required after a major update, I always used some very helpful hints here, on the Mozilla Community Support Forum using the chrome/css process.

Were you able to see my screen shot result?

Content of current userChrome.css:

/* TABS: on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 33px !important; /* adjust to suit your needs */
}
:root #tabbrowser-tabs {
 --tab-min-height: 33px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* hide windows-controls */
#TabsToolbar #window-controls {display:none!important;}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}
#toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;}

Modified by cor-el

more options

To prevent the forum from trying to implement your code, you can edit your last reply and put <pre> before and </pre> after.

Could I suggest the following site for this question:

https://www.reddit.com/r/FirefoxCSS/

I think most likely the "Classic CSS" files from the developer of the old Classic Theme Restorer extension would be suggested. https://github.com/Aris-t2/CustomCSSforFx/

I realize that's a lot to wade through, but since I can only test on Windows, I don't want to try to give you a file and waste time for both of us.

more options
Thanks for the "
" tip!  Promise, won't do that again.  Will follow up on your references. Thx

(Don't know why this message is truncated and in mixed fonts.)

Modified by jYOW

more options

jYOW said

(Don't know why this message is truncated and in mixed fonts.)

You didn't close your preformatted section. In order to prevent the site from interpreting HTML tags, you need to use the entity, or other words, write:

&lt;

in place of

<

(I know, too much information!)

more options

Never TMI; just too dumb to appreciate implications!

Hope someone with MacOS has same problem and will await their trials at finding solution.

Keep in mind that the css code worked perfectly under FF 65.

more options

This is likely a problem with the caption butons on Mac.

That would be this part of the code that needs adjustment, so you could look for code for .titlebar-buttonbox-container that is aimed at Mac. As a quick test you can try to hide these buttons via a display:none!important; rule.

.titlebar-buttonbox-container {display:none!important;}

Other code you can try as a start:

.titlebar-buttonbox-container {
  position: fixed !important;
  top:0 !important; left:0 !important; /*Mac: Left*/
  visibility: visible !important;
  display: block !important;
}

/* move caption buttons to right of Tab bar */
#main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {
 position: fixed !important;
 right: 0 !important;
 top: calc(6px + var(--tab-min-height)) !important;
 display: block !important;
 visibility: visible !important;
}
more options

Many thanks cor-el. On 4 day road trip; will attempt adjustments Friday.

more options

Chosen Solution

Hello cor-el,

I managed to get the tabs on bottom as well as lined up with their background bar using a "Windows" (!) solution for my MAC:

http://bragonx.wixsite.com/bhxx/firefox-tabs-on-bottom-v65andhigher

One question though - could you direct me to a Mozilla page where I could at least learn to start NAMING the various bars properly?

Thanks

Modified by jYOW