Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
The font color of the menubar is not changeable with IE6 and IE7 but works with IE8, FF4, Opera 10.
I use the following css rule with the sample code of the zk sandbox:
<zk>
<style dynamic="true">
.z-menu-inner-m .z-menu-btn{
color: white;
}
</style>
<menubar id="menubar" width="100%">
<menu label="Project" image="/img/Centigrade-Widget-Icons/Briefcase-16x16.png">
<menupopup>
<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseSpark-16x16.png" label="New"
onClick="alert(self.label)" />
<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseOpen-16x16.png" label="Open"
onClick="alert(self.label)" />
<menuitem image="/img/Centigrade-Widget-Icons/DisketteBlack-16x16.png" label="Save"
onClick="alert(self.label)" />
<menuseparator />
<menuitem label="Exit" image="/img/Centigrade-Widget-Icons/DoorOpen-16x16.png" onClick="alert(self.label)" />
</menupopup>
</menu>
<menu label="Help" image="/img/Centigrade-Widget-Icons/QuestionmarkButton-16x16.png">
<menupopup>
<menuitem label="Index" onClick="alert(self.label)" />
<menu label="About">
<menupopup>
<menuitem label="About ZK"
onClick="alert(self.label)" />
<menuitem label="About Potix"
onClick="alert(self.label)" />
</menupopup>
</menu>
</menupopup>
</menu>
<menu image="/img/Centigrade-Widget-Icons/Spyglass-16x16.png">
<menupopup>
<menuitem label="Index" onClick="alert(self.label)" />
<menu label="Color Picker" content="#color=#184dc6"/>
</menupopup>
</menu>
</menubar>
<checkbox label="Vertical orient">
<attribute name="onCheck">
menubar.orient= self.checked ? "vertical" : "horizontal";
menubar.width = self.checked ? "100px" : "200px";
</attribute>
</checkbox>
<checkbox label="Autodrop">
<attribute name="onCheck">
menubar.autodrop = self.checked;
</attribute>
</checkbox>
</zk>The problem is that ie creates 3 elements for a menuitem: '<INPUT class=z-menu-item-btn>', '#text' and '</INPUT>'. Only the first element obtains the css rule, but not the second one (which contains menuitem's label). But i don't know how to fix the problem.
Have you fixed the problem?
I have manually set up such a style and it seems working now:
<style>
.z-menu-item-body .z-menu-item-inner-m div{
font-family: Helvetica;
font-weight: 300;
font-size: 13px;
color: white;
}
.z-menu-item-body-over .z-menu-item-inner-m div{
font-family: Helvetica;
font-weight: 300;
font-size: 13px;
color: black;
}
.z-menu-body .z-menu-inner-m div{
font-size: 14px;
color: white;
}
.z-menu-body-seld .z-menu-inner-m div{
font-size: 14px;
color: black;
}
</style>Asked: 2011-05-02 09:09:39 +0800
Seen: 543 times
Last updated: Jul 26 '11