Hi All,
I am trying to style my application menus but have run into problems
when I use separators as menu items or set 'variableRowHeight' to
true. My menu style is as follows:
Menu
{
rollOverColor: #000000;
selectionColor: #000000;
backgroundColor: #161515;
}
When I emply this global style I have two problems with how the menu is drawn.
1. The menu separator is drawn as a double line or it has a shadow or something
2. If I set the 'variableRowHeight' property to true the menu is
clipped at the bottom and the last item only partialy shows
If I remove the style from my CSS it works fine, but does not meet the
UI design and clipping issue is still present. However, if I remove my
CSS entirly the menu does not get clipped, I must have some CSS class
that is corrupting my menu style.... I tried to specify the separator
class with a custom image, but again it is drawing a double line... I
am stumped not sure what in my CSS could be conflicting.
The only CSS styles that I can think could be affecting are:
global
{
themeColor: #666666;
/* Text Styles */
color: #cccccc;
fontStyle: normal;
fontWeight: normal;
fontSize: 10;
fontFamily: Arial;
letterSpacing: 1;
textSelectedColor: #FFFFFF;
textRollOverColor: #FFFFFF;
textAlign: left;
/* Modal window effect */
modalTransparency: 0.5;
modalTransparencyBlur: 0;
modalTransparencyColor: black;
modalTransparencyDuration: 200;
}
/* Application Font */
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}
Application
{
backgroundColor: #000000;
paddingBottom: 0;
paddingTop: 0;
paddingRight: 0;
paddingLeft: 0;
verticalGap: 0;
horizontalGap: 0;
}
Any help is much appreciated!
Thanks,
Greg
