That an example of the backbutton with the "dropmarker" for the back history. The problem, that you can see on the right, is that the bounding box of the dropmarker crosses over the back button, so that you only have 2/3 of the back button that is useful, and the rest gets used by the dropmarker.

I went into browser.xml in the classic skin, and inside the toolbar-menu-button binding I tried switching the toolbar button and dropmarker so that the dropmarker appeared under the toolbar button, instead of over it:

<xul:dropmarker ... />
<xul:toolbarbutton ... />

instead of

<xul:toolbarbutton ... />
<xul:dropmarker ... />

That fixes the issue of the overlap, but when I do that the dropmarker no longer will process its clicks and show the history menu, and instead it will move back one page in the history, as if you clicked on the back button. The back button behaves as normal.

I've tried messing with the various attributes of those two elements, but to no effect (because I don't know what I'm doing). I need to get the dropmarker to appear behind the back button, but process its clicks as it normally would.

Does anyone have an idea as to how to fix this? If my explanation isn't clear, let me know.

chrisn wrote:Actually, this has to do with event propagation, not positioning. But thanks!

OK, but from your description it seemed like you wanted to know how to make the "toucharea" of the dropdownbox smaller.
And the thread I linked to to me seems like it has code in it that show just how to do it... using CSS rect to define the toucharea.

AtomB wrote:yeah my original post was just dealing with icon sizing. i'm going to be looking into this for lynchknot and will post my results in here as well.

Cool! Any help would be appreciated. I just don't know enough about XUL at this point to figure out a solution.

hehe well guess what. i really don't know any thing about it either. i just study the .css files and try to figure out what ever thing means. i haven't had a chance to look at it yet but i'll be sitting down and working on a new theme tonight, so hopefully i'll get it figured out.

The problem is that this isn't a matter of clickable areas. If you have an image map, and only part of the image map is clickable, events outside the clickable area don't propagate down to the element underneath the image.

The problem is that the dropmarker image in this instance has a bounding area that covers the back button. There are only two possible solutions that I see:

2) The dropmarker needs to be physically placed behind the back button so that the back button isn't obscured by the click area of the dropmarker. I can't figure out how to make this happen. The two buttons are in a stack, and changing their z-order via CSS has no effect. The dropmarker still appears in front of the back button because of its placement in the stack. I've changed the order of the stack in the binding for the menubutton, but the the events don't propagate properly. Clicks on the dropmarker don't show the history menu, and instead the event becomes a "back one page in browser's history" event, even though the back button itself isn't clicked or moused over.

I don't know how to explain it better beyond that, and I can't get a grip on XUL's syntax at all.

chrisn wrote:The two buttons are in a stack, and changing their z-order via CSS has no effect. The dropmarker still appears in front of the back button because of its placement in the stack. I've changed the order of the stack in the binding for the menubutton, but the the events don't propagate properly.

Are you familear with how z-index works?
If not, the most common misconception is that the values are "global" in the entire document. However they are in fact local.

eg take this example

<div style="z-index:1;"><p style="z-index:5000000;></p></div>

<div style="z-index:2;"><p style="z-index:0></p></div>

In this case the second <p> will be ABOVE the first one even if the first has a z value of 5 000 000 and the second 0, becuase it's parent is higher (2 is above 1).

Also isn't there also an option 3 = make the dropdown button smaller? Then it won't cover so much of the backbutton...

And option 4, don't use a dropdown button at all You can get the dropdown manu by simply rightclicking the button anyway