CSS styles doesn't work in menu toolbar in Firefox (extension) - firefox

Question

If I put my extension in menu bar, after closing extension some CSS properties doesn't work. (In the add-on toolbar it works perfectly)
Video: http://www.youtube.com/watch?v=iM9EVFe8M4U
github: https://github.com/Exclumice/firex/tree/master/content
CSS: https://github.com/Exclumice/firex/blob/master/skin/overlay.css
CSS properties which become inoperable:
.proxy-help {
background: url("icon-help.png");
background-position: 97% 50%;
background-repeat: no-repeat;
background-color: #e5e5e5;
border-radius: 10px;
padding: 5px;
text-align: center;
width: 100%;
}
.proxy-help-text > label {
width: 80%;
}
.proxy-list hbox > label.proxy-country {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: url("planet.png");
background-position: 5px center;
background-repeat: no-repeat;
width: 180px;
text-indent: 25px;
}
.proxy-list .proxy-type {
padding: 5px;
width: 50px;
}
How to fix it? Why is this happening?
Thanks in advance.

Answer 1

Ok after testing we find this.
When it is in toolbar, the elements are black in DOM Inspector, so they are NOT anonymous:
But when we move them to PanelUI-popup they become anonymous, notice how they are red in the inspector:
maybe #nmaier can advise here.
I'm thinking a box loses its box'ness so then the % widths you used are taking the % of osme different box once placed in panelui-poup.