Blank bar at bottom of window on 113 version
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>
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 */
- main-window:not([inFullscreen="true"]) > body::after{
display: -moz-box;
content: "";
height: 20px;
border-top: solid 0px #505050;
Read this answer in context 👍 0All Replies (4)
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.
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.
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
Chosen Solution
Managed to find the code causing the issue, my precious screen real estate has been saved. Thank you.
/* Status-bar */
- main-window:not([inFullscreen="true"]) > body::after{
display: -moz-box;
content: "";
height: 20px;
border-top: solid 0px #505050;