Why isn't my button responding to the mouse?
Layers that are interactive, like buttons,menus, or scrolling text fields should never be covered by other layers. Even if the part of the top layer covering the lower layer is transparent it will still interfere with the user clicking on the lower layer. Take the following example:
Notice that the bounding box of the selected layer covers the button layer below it in its transparent area.
Because this can be a common problem SiteGrinder will warn you about it in the pre-build report. Be sure to keep an eye out for it. There are several quick ways to fix this situation:
1. Simply move the covering layer beneath the layer it is blocking:
<- This layer order will work fine
2. Or split the covering layer into pieces that don't individually block the interactive layer:
<- This is also fine.
Splitting will still create a problem if the split layers are in a layer set with the "-merge" hint because SiteGrinder will join them together again before outputting them:
In general to minimize the potential for this problem it's best to keep the interactive layers close to the top of the layer list unless doing so gets in the way of sensible layer organization.
It's also important to verify that your layers aren't bigger than you think they are. Sometimes when you remove part of a layer using the eraser or the cut command you may accidentally leave some residue behind depending on whether or not you had every pixel selected when did the removal. This can create a layer that looks small but actually has a few hard-to-see leftover pixels that make the layer's rectangle too large. If the layer is a button this can create a big problem. The SiteGrinder pre-build report, which appears when you launch SiteGrinder, will warn you if this is happening.
Some yellow pixels have accidentally been left in the same layer as the blue button above. Notice how big its bounding box is even though it is the only layer selected.
A great way to tell exactly what's going on is to select the layer and then choose the Move tool from the tool palette. If you activate the "Show Bounding Box" option then you will be able to see how big the layer really is, not just how big it looks, as in the above image in which the blue button is selected and surprisingly covers the purple button with its rectangle thanks to some leftover pixels in the lower right corner. To fix this just select the pixels you want in the layer, invert the selection, and delete.