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

Firefox 57 tabs on bottom , there are solution, don't work correctly with private browsing. Tabs are moved above content-deck. Is there way to correct it?

  • 8 replies
  • 2 have this problem
  • 9 views
  • Last reply by georgy4

more options

Base solution https://support.mozilla.org/en-US/questions/1189624#answer-1039600 working well with base browsing mode. But there are problem with private browsing. Tabs are moved above content-deck. Is there way to correct it?

Base solution https://support.mozilla.org/en-US/questions/1189624#answer-1039600 working well with base browsing mode. But there are problem with private browsing. Tabs are moved above content-deck. Is there way to correct it?

Chosen solution

With #tabbrowser-tabs { width: 96%; } working well.

  #TabsToolbar:not([inFullscreen="true"]) {
 position: fixed;
 bottom: 0;
 width: 100%;

}

  #tabbrowser-tabs { width: 96%; } 
  #main-window:not([inFullscreen="true"]) 
  #content-deck { margin-bottom: 3.0em; }

/* For Windows */

  #TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator {
 position: absolute !important;
 right: 0;
 bottom: 1px;

} Thank to all of you very much !

Read this answer in context 👍 1

All Replies (8)

more options

You can try the version I posted in this thread if that works better.

more options

cor-el said

You can try the version I posted in this thread if that works better.

That works, assuming I display the Menu Bar or Title Bar, but I needed to add this so the tabs don't get bumped up by the mask icon in the private window (on Windows 7):

.private-browsing-indicator {
  position: absolute !important;
  right: 0;
  bottom: 1px;
}
more options

On Linux this mask icon is always at the left end of the tab bar.

If that code is supposed to work when on Windows this icon is moved to the tab bar, wouldn't be better to make the code more specific and add #TabsToolbar or is this icon positioned elsewhere in the DOM?

How does the code work on Windows in Full Screen mode? Does that allow auto-hide to work properly?

more options

I think the absolute positioning works because the tab bar is back on top and scrolls up in full screen. However, no harm making the selector more specific:

#TabsToolbar:not([inFullscreen="true"]) {
  position: fixed;
  bottom: 0;
  width: 100%;
}
#main-window:not([inFullscreen="true"]) #browser-bottombox {
  margin-bottom: 2em;
}
/* For Windows */
#TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator {
  position: absolute !important;
  right: 0;
  bottom: 1px;
}
more options

jscher2000

Thank you very much. This work pretty well. Now the tabs placed at the bottom in private browsing mode too. But there are side effect. The tabs become very narrow compared to base one. You can see it at the shot. Do you have ideas how to avoid this ?

more options

Chosen Solution

With #tabbrowser-tabs { width: 96%; } working well.

  #TabsToolbar:not([inFullscreen="true"]) {
 position: fixed;
 bottom: 0;
 width: 100%;

}

  #tabbrowser-tabs { width: 96%; } 
  #main-window:not([inFullscreen="true"]) 
  #content-deck { margin-bottom: 3.0em; }

/* For Windows */

  #TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator {
 position: absolute !important;
 right: 0;
 bottom: 1px;

} Thank to all of you very much !

Modified by georgy4

more options

I need to use 93% to make it work with opening that many tabs that the "List all tabs" button appears.

#tabbrowser-tabs { width: 93%; }

Modified by cor-el

more options

Thank you cor-el.

Usually I don't open that much tabs (didn't know about this button :)), but yes this work good.