This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Blank bar at bottom of window on 113 version

  • 4 replies
  • 0 have this problem
  • 13 views
  • Last reply by drogers4114

more options

On 112, I had my css set up to make the status bar hidden and only show the url path when I moused over it in the lower left corner of the window. It also cut itself short to only the length of the url similar to the www.wikipedia.org box in the attached picture. After upgrading to 113, my browser has this black bar at the bottom. When I cleared out my css file, urls would show up in the bar when I moused over them. I've tried a few different css fixes but none of them will get it back to how I had it working in 112. The picture attached is what I'm getting in 113 right now with the css below. the black bar below the mouse over url goes all the way across the window and is always visible. Here is my current css file:

radiogroup:focus-visible > radio[focused="true"] > .radio-label-box {

outline: 1px dotted black !important;

}

:root{ --toolbar-field-focus-border-color: transparent !important; }

:root{ --uc-titlebar-padding: 10px; }

@media (-moz-os-version: windows-win7),(-moz-os-version: windows-win10){

:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }

}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,

#TabsToolbar > .titlebar-buttonbox-container{

position: fixed;

display: block;

top: var(--uc-titlebar-padding,0px);

right:0;

height: 40px;

}

/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */

@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){

:root{ --uc-titlebar-padding: 0px !important }

.titlebar-buttonbox-container{ left:0; right: unset !important; }

}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{

order: 2;

-moz-appearance: none !important;

--tabs-navbar-shadow-size: 0px;

}

#unified-extensions-button{

display: none !important;

}

.titlebar-placeholder,

#TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */

#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */

toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }

#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0

See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */

/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{

/* height if native titlebar is enabled, assumes empty menubar */

--uc-menubar-height: 22px;

}

:root[tabsintitlebar]{

/* height when native titlebar is disabled, more roomy so can fit buttons etc. */

--uc-menubar-height: 22px;

}

#navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important }

:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }

#toolbar-menubar{

position: fixed;

display: flex;

top: var(--uc-titlebar-padding,0px);

height: var(--uc-menubar-height);

width: 100%;

overflow: hidden;

}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }

#toolbar-menubar > spacer[flex]{

order: 99;

flex-grow: 1;

min-width: var(--uc-window-drag-space-width,20px);

}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* Status-bar */

#main-window:not([inFullscreen="true"]) > body::after{

display: -moz-box;

content: "";

height: 20px;

border-top: solid 0px #505050;

}

.browserContainer>statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }

.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; }

window[inFullscreen="true"] #browser-bottombox { display:none !important; }

window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; }

#statuspanel #statuspanel-label {

-moz-appearance: none !important;

border: 0px solid black !important;

}

On 112, I had my css set up to make the status bar hidden and only show the url path when I moused over it in the lower left corner of the window. It also cut itself short to only the length of the url similar to the www.wikipedia.org box in the attached picture. After upgrading to 113, my browser has this black bar at the bottom. When I cleared out my css file, urls would show up in the bar when I moused over them. I've tried a few different css fixes but none of them will get it back to how I had it working in 112. The picture attached is what I'm getting in 113 right now with the css below. the black bar below the mouse over url goes all the way across the window and is always visible. Here is my current css file: <pre><nowiki>radiogroup:focus-visible > radio[focused="true"] > .radio-label-box { outline: 1px dotted black !important; } :root{ --toolbar-field-focus-border-color: transparent !important; } :root{ --uc-titlebar-padding: 10px; } @media (-moz-os-version: windows-win7),(-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 40px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } #unified-extensions-button{ display: none !important; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important } :root{ /* height if native titlebar is enabled, assumes empty menubar */ --uc-menubar-height: 22px; } :root[tabsintitlebar]{ /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ --uc-menubar-height: 22px; } #navigator-toolbox{ padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding,0px)) !important } :root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: var(--uc-menubar-height); width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* Status-bar */ #main-window:not([inFullscreen="true"]) > body::after{ display: -moz-box; content: ""; height: 20px; border-top: solid 0px #505050; } .browserContainer>statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; } .browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0px !important; } window[inFullscreen="true"] #browser-bottombox { display:none !important; } window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; } #statuspanel #statuspanel-label { -moz-appearance: none !important; border: 0px solid black !important; }</nowiki></pre><br>
Attached screenshots

Modified by cor-el

Chosen solution

Managed to find the code causing the issue, my precious screen real estate has been saved. Thank you.


/* Status-bar */

  1. main-window:not([inFullscreen="true"]) > body::after{

display: -moz-box;

content: "";

height: 20px;

border-top: solid 0px #505050;

Read this answer in context 👍 0

All Replies (4)

more options

Did you try to start with a fresh userChrome.css and add one rule at the time to check where this goes wrong ?

See also this subreddit forum.

more options

I'm not good with this kind of scripting. Is each rule split up by the {} symbols? If so, I have not tried adding each part yet but I'll give that a shot.

more options

there's a quick and easy way to banish the black bar if it ever appears when you open Chrome.

Spot the black bar in a Chrome window. Enter Chrome's full-screen mode. Exit full-screen mode. Continue browsing – the black bar should be no more (for now)

Regards, Will

more options

Chosen Solution

Managed to find the code causing the issue, my precious screen real estate has been saved. Thank you.


/* Status-bar */

  1. main-window:not([inFullscreen="true"]) > body::after{

display: -moz-box;

content: "";

height: 20px;

border-top: solid 0px #505050;