Firefox browser.xul chrome: grey line added between toolbars and HTML content

Question

For the longest time, I've been bothered by the thin 1-pixel horizontal grey line Firefox inserts between the browser toolbars and the HTML content area (latest version and just about every version since 4, if I recall correctly), so I've recently begun digging into the browser.xul chrome file and tried to hide it using userChrome.css. However, I've been unable to properly locate it or modify it. It seems to not completely obey the rules of CSS styling, as if (I guess) it were hardcoded somewhere in the browser and not a part of the customizable layout.

Here is a screenshot showing the line during standard operation (note: I'm using the 'Black Mosaic' appearance here for clarity, but the line is present with any appearance including the default, and is not a part of the current page HTML).

Firefox grey line

Now here is the appearance using the following CSS in userChrome.css:

toolbox#navigator-toolbox {
    border: 2px solid red !important;
    padding: 12px !important;
}
toolbox#navigator-toolbox > * {
    border: 1px dashed #b0d0f0 !important;
    margin: 4px;
}

Modified Firefox chrome

The grey line responds to the 12-pixel padding of #navigator-toolbox, but it does not get its own border as a child element of #navigator-toolbox. If I attempt to hide all child elements like so, I get the following result:

toolbox#navigator-toolbox {
    border: 2px solid red !important;
    padding: 12px !important;
}
toolbox#navigator-toolbox > * {
    display: none !important;
}

Hidden Firefox toolbar chrome

I've also tried checking whether it's the background color or border color of other elements involved near the toolbars, and I've tried styling all <hr> elements as well (it doesn't appear to be one of those either). Am I doing something completely wrong and investigating down the wrong alleys here, or is this a bug/known strange behavior of Firefox?

Wladimir Palant · Accepted Answer · 2012-05-24T06:39:43.900

That's a tricky question, even with DOM Inspector I had trouble figuring out where this line comes from. However, if I changed the ID of the toolbox element to something different and added style="-moz-appearance: none" (this style is usually applied to the navigator toolbox) the line disappeared - so it must be some style applying to #navigator-toolbox. I then looked at browser.css directly and immediately found the source of the problem:

#navigator-toolbox::after {
  content: "";
  display: -moz-box;
  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
  height: 1px;
  background-color: ThreeDShadow;
}

So - yes, this isn't a child of the toolbox, it is a pseudo-element (and as such not visible in DOM Inspector). A user style like this should remove the line:

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

The default theme already applies this style if "Tabs on Top" is switched off.

That does the trick! Although the visibility tag there doesn't seem to have an effect in my current setup, I'm able to adjust the background color or use display:none; to remove it. Thanks for digging! — ccjuju, May 24 '12 at 06:16

Firefox browser.xul chrome: grey line added between toolbars and HTML content

1 Answers1