Button errors

hi!

i have discovered several strange button behavior.

given a button

    <button onAction="button">
       
    </button>

and a css style

button {
    layout-data:bld(north);
    align:left;
    margin:5 5 5 5;
    border: 2 2 2 2;
    color:white;
    bg-image:url(menu_32.64.png);
    bg-repeat:1|1;
    min-size:32 64;
}

button:hover {
    border: 2 2 2 2;
    color:black;
}

1. the border color in not displayed

2. hover property dosn execute

1. The border color can't change, because you don't define any border-color property (please check the Widget Reference page section Style properties)
   
2. In your hover definition, only the button text color will change ... but your button doesn't have any text content (you button doesn't have any child tag).
   

Your code contains several mistakes according of what you want to do :

• to change the border color, you need to use the border-color property instead of color
• bg-repeat syntax is : bg-repeat: <repeatx> <repeaty>. Then you need to replace the | seprator by a space if you want to repeat it only once. | separator is used for multi background (see this page)

Optimization you can do :

<button onAction="button" />

button {
    layout-data:bld(north);    /* If you to this all buttons of your application is bld(north) !!! */
    align:left;
    margin:5;
    border: 2;
    border-color:white;
    bg-image:url(menu_32.64.png);
    bg-repeat:1 1;
    min-size:32 64;
}

button:hover {
    border-color:black;
}

oh, ok sorry I missread reference page :(