CSS not applying to anonymous element on Linux/Mac

Question

I'm having the following issue: a class of .profilis-tbb is not applying to an anonymous element ".profilist-tbb-box" which I added with XBL.

I have an XBL file with two bindings. #tbb and #tbb_box. #tbb extends the toolbarbutton which has class .profilist-tbb and this #tbb_box is an box element that contains this toolbarbutton.

Good result looks like this image, and it does look like this, but only on Windows:

And DOM Inspector of this good (on Windows XP, 7, 8.1):

Now the issue is on Linux and Mac the toolbarbutton is not taking the CSS. This image is from Linux:

In Linux though the #tbb_box XBL is applying successfully (even though the toolbarbutton one is not):

The structure is this, in XUL I add a box element and give it class:

['xul:box', {class:'profilist-tbb-box', label:'blah'}];

And then this is the XBL that applies: (in case of profilist-tbb and Linux/Mac it SHOULD apply but it doesn't)

.profilist-tbb-box {
    -moz-binding: url('chrome://profilist/content/xbl.xml#tbb-box');
}
.profilist-tbb {
    -moz-binding: url('chrome://profilist/content/xbl.xml#tbb');
}

XBL file:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">
    <binding id="tbb" role="xul:toolbarbutton" extends="chrome://global/content/bindings/button.xml#button-base">
        <resources>
            <stylesheet src="chrome://global/skin/toolbarbutton.css" />
        </resources>
        <content>
            <children includes="observes|template|menupopup|panel|tooltip" />
            <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,label" flex="0" />
            <xul:image class="profilist-badge" xbl:inherits="validate,src=badge,label" width="1" flex="0" />
            <xul:stack class="profilist-display-stack" flex="1">
                <html:input class="profilist-input" xbl:inherits="value=label" />
                <xul:label class="toolbarbutton-text" crop="right" flex="1" xbl:inherits="value=label,accesskey,crop,wrap" />
            </xul:stack>
        </content>
    </binding>
    <binding id="tbb-box">
        <content>
            <toolbarbutton class="profilist-tbb" xbl:inherits="label,disabled" />
            <xul:box class="profilist-submenu" xbl:inherits="disabled">
                <xul:image class="profilist-is-default" xbl:inherits="disabled" />
                <xul:image class="profilist-clone" xbl:inherits="disabled" />
                <xul:image class="profilist-dots" xbl:inherits="disabled" />
                <xul:image class="profilist-dev-build" xbl:inherits="disabled" />
                <xul:image class="profilist-dev-safe" xbl:inherits="disabled" />
                <xul:image class="profilist-default" xbl:inherits="disabled" />
                <xul:image class="profilist-rename" xbl:inherits="disabled" />
                <xul:image class="profilist-inactive-del" xbl:inherits="disabled" />
            </xul:box>
        </content>
    </binding>
</bindings>

Why is the XBL not applying to the toolbarbutton which is inside the box?

Answer 1

I resolved this by removing that toolbarbutton I switched to this XBL:

Notice how i replaced the <toolbarbutton> element with what was in the first binding. So now just have one binding.