Problem with skinning toolbar buttons

Post by **chrisn** » November 11th, 2002, 8:31 am

I'm having a problem regarding the skinning of the back and forward buttons. Take a look at the following image:

<img src="http://www.mozillazine.org/problem.jpg" width="262" height="89">

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.

--chris

Stefan · Post by **Stefan** » November 11th, 2002, 8:40 am

AtomB's post in this thread should give you a clue or two

http://www.mozillazine.org/forums/viewtopic.php?t=469

Post by **chrisn** » November 11th, 2002, 12:47 pm

Stefan wrote:AtomB's post in this thread should give you a clue or two

http://www.mozillazine.org/forums/viewtopic.php?t=469

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

Stefan · Post by **Stefan** » November 11th, 2002, 3:51 pm

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.

But if you say it's not it then I guess it's not it

AtomB · Post by **AtomB** » November 11th, 2002, 11:46 pm

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.

Post by **chrisn** » November 12th, 2002, 5:50 am

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.

AtomB · Post by **AtomB** » November 12th, 2002, 3:49 pm

chrisn wrote:
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.

Stefan · Post by **Stefan** » November 12th, 2002, 11:58 pm

AtomB wrote: 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.

Well if you can't, check out this link which deals with Image maps (touch area shapes) were also the word RECT appear (which is why I thought your other thread was related...).

http://www.w3.org/TR/html4/struct/objec ... adef-shape

AtomB · Post by **AtomB** » November 13th, 2002, 2:48 am

thanks for that link i'll take a look at it and see what i can get figured out. i'm new to all this as well and i'm learning it as i go.

Post by **chrisn** » November 13th, 2002, 5:53 am

Stefan wrote:
AtomB wrote: 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.

Well if you can't, check out this link which deals with Image maps (touch area shapes) were also the word RECT appear (which is why I thought your other thread was related...).

http://www.w3.org/TR/html4/struct/objec ... adef-shape

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:

1) Mozilla alters their event model to allow click events to pass through transparent areas of images

or

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.

Stefan · Post by **Stefan** » November 13th, 2002, 8:45 am

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