Arrow on drop-down button in wrong position

[XTAL256]

I use LastPass, and have it's button in the tool bar. By default, it does not show the little drop-down arrow on the button, but I have made a Stylish style to change that (and other things, I have it when 3rd party add-ons override the default theme) - see here.

But for some reason, the arrow is appearing below the image:


It used to show on the right in an older version of Firefox (probably also with an older version of LastPass). I still have that version installed, so I had a look at the styles being applied to both the toolbarbutton and the xul:dropmarker elements. There were many differences, presumably due to the newer browser using newer CSS specs. But I could not see any differences in positioning. There must be something I'm missing.

[mcdavis]

There were many differences, presumably due to the newer browser using newer CSS specs. But I could not see any differences in positioning. There must be something I'm missing.

You might try using DOM Inspector to look for the [orient] attribute on the DOM node. Also look into the CSS assigned and used values for -moz-box-direction, -moz-box-orient and -moz-box-align.

[XTAL256]

All those properties are the same between the old and new version. The new one does have -moz-orient set to "auto", but when I changed it to "horizontal" it had no effect.

[XTAL256]

I still can't figure this out. I've tried everything I can think of, setting -moz-box-(orient|pack|align|direction) on the button, float left/right on the dropmarker, even relative and absolute positioning.
The only thing that seemed to work was setting relative position then moving the dropmarker arrow up and to the right. But the weird thing is that as soon as I hovered over the button, the arrow jumped right back to it's original position bottom center!

[Frank Lion]

There must be something I'm missing.

Probably need -moz-appearance: none !important; on the dropmarker.

I haven't looked at your problem, but whenever I've had stuff that is defying all my commands, it always turns out to be that which shuts it up.

[XTAL256]

Hmm, I thought it already was none, or that I tried and it didn't help. I'll have another look.

[XTAL256]

Na, -moz-appearance: none won't help, it's already being set by chrome://global/skin/toolbarbutton.css.

Maybe I'll just leave it. It doesn't look too bad without the dropdown arrow, it just doesn't conform to UI standards. It's amazing how much LastPass try to make their UI not look like the rest of the browser/OS.