[Project_owners] Alignment of drop-down marker and caption in a <toolbarbutton> with a <menupopup>

Philip Chee philip at aleytys.pc.my
Sun Feb 12 19:39:19 EST 2006

On Sun, 12 Feb 2006 01:42:36 -0800, Alex Eng wrote:

> One toolbar button in my extension window has a <menupopup> element 
> associated with it; i.e., <toolbarbutton type="menu">.  The CSS 
> -moz-box-orient attribute for all <toolbarbutton> elements is set at 
> vertical, so that the toolbar button caption appears below the button image.

> However, the drop-down marker (the little arrow on the button that 
> indicates that a menu will appear if the button is pressed) is aligned 
> vertically as well, below the button caption.  Changing -moz-box-orient 
> to horizontal will align the drop-down marker correctly, but now the 
> button captions are aligned horizontally, which is not what I want.

> How do I get the drop-down marker on the toolbar button to appear to the 
> right of the button image while keeping the button caption below the 
> button image?  Thanks.

1. The DOM Inspector is your friend.
2. The answer depends on the theme you are using.
3. Eventually I gave up and decided to only support classic and modern.
   Any other theme, it's the theme author's problem not mine.

Eventually you end up doing weird things like:

/* SeaMonkey and Firefox Modern */

toolbar #flashblockToggle-button,
toolbaritem#wrapper-flashblockMozToggleBtn .toolbarbutton-menubutton-stack {
  display: -moz-box;
  -moz-box-orient: horizontal;

toolbar #flashblockToggle-button .toolbarbutton-menubutton-button {
  -moz-box-orient: vertical;

toolbar #flashblockToggle-button,
toolbar #flashblockToggle-button .toolbarbutton-menubutton-button,
toolbar #flashblockToggle-button .toolbarbutton-menubutton-dropmarker {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0;

toolbar #flashblockToggle-button .toolbarbutton-menubutton-dropmarker,
toolbaritem#wrapper-flashblockMozToggleBtn .toolbarbutton-menubutton-stack
.toolbarbutton-menubutton-dropmarker {
  margin: 0 !important;
  padding: 0 1px 0 1px !important;

Philip Chee <philip at aleytys.pc.my>, <philip.chee at gmail.com>
http://flashblock.mozdev.org/ http://xsidebar.mozdev.org
Guard us from the she-wolf and the wolf, and guard us from the thief,
oh Night, and so be good for us to pass.
[ ]It depends on which end he tries to light...
* TagZilla 0.059

More information about the Project_owners mailing list