0

IE6/IE7: Font color of the menubar not changeable

asked 2011-05-02 09:09:39 +0800

JGA gravatar image JGA
15

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 colour is still black in IE7 and not white.
Is there an other workaround to change the color?
I tried different ways, but not successfully.

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2011-06-21 08:44:43 +0800

vanpetroff gravatar image vanpetroff
6

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?

link publish delete flag offensive edit

answered 2011-06-21 10:48:52 +0800

JGA gravatar image JGA
15

I haven't fixed it yet, but I will try it again when I have time. Thanks for your hint.

link publish delete flag offensive edit

answered 2011-07-25 22:41:58 +0800

slimez gravatar image slimez
18

i have the same problem here . anyone solved?

link publish delete flag offensive edit

answered 2011-07-26 06:40:01 +0800

vanpetroff gravatar image vanpetroff
6

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>

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-05-02 09:09:39 +0800

Seen: 542 times

Last updated: Jul 26 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More