Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I'm using an external CSS-file within my own theme. Now I want to change the style of a
modal window and its components.
If I use only the external CSS-file the changes appear only in firefox not in IE7.
If I insert the style tags in the window tag, the IE7 works correct and I see the style changes.
My problem is that I have to use an external CSS-file.
Hi,
The problem is possible to be a bug since it works on firefox,
how about sharing sample code or telling us what style you used?
Thanks.
Ok, here are sample codes.
I have two ZUL-files. The first is calling via button the second ZUL-file and show it as modal window. Additional I have an own CSS-Theme which contains the style definitions.
First ZUL-file:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk>
<window mode="modal" id="win2" title="" border="normal" width="800px" sclass="bg-wizard-window"
height="200px" >
<button label="Hello.doModal">
<attribute name="onClick">{
final Window win = (Window) Executions.createComponents(
"/gwtest3.zul", null, null);
win.setMode("modal");
win.setSclass("bg-wizard-window");
}</attribute>
</button>
</window>
</zk><?page title="new page title" contentType="text/html;charset=UTF-8"?> <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?> <zk> <window id="win" title="" border="normal" width="800px" height="200px" sclass="bg-wizard-window"> </window> </zk>
<%-- wizard window --%>
.bg-wizard-window .z-window-modal-tl {
background: url(${c:encodeURL("/img/wtp-l.png")}) no-repeat 0 0;
}
.bg-wizard-window .z-window-modal-tr, .bg-wizard-window .z-window-overlapped-tr {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-r.png'))}) no-repeat right 0;
}
.bg-wizard-window .z-window-modal-tm-noheader {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-m.png'))}) repeat-x 0 0;
}
.bg-wizard-window .z-window-modal-cl {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-lr.png'))}) repeat-y 0 0;
}
.bg-wizard-window .z-window-modal-cr {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-lr.png'))}) repeat-y right 0;
}
.bg-wizard-window .z-window-modal-bl {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-l.png'))}) no-repeat 0 bottom;
}
.bg-wizard-window .z-window-modal-br {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-r.png'))}) no-repeat right bottom;
}
.bg-wizard-window .z-window-modal-bm {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-m.png'))}) repeat-x 0 bottom;
}
.bg-wizard-window .z-window-modal-cnt {
padding:0px; background:red
}
.bg-wizard-window .z-window-modal-cm {
border:0px;
}<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk>
<style>
.bg-wizard-window .z-window-modal-tl {
background: url(${c:encodeURL("/img/wtp-l.png")}) no-repeat 0 0;
}
.bg-wizard-window .z-window-modal-tr, .bg-wizard-window .z-window-overlapped-tr {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-r.png'))}) no-repeat right 0;
}
.bg-wizard-window .z-window-modal-tm-noheader {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-m.png'))}) repeat-x 0 0;
}
.bg-wizard-window .z-window-modal-cl {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-lr.png'))}) repeat-y 0 0;
}
.bg-wizard-window .z-window-modal-cr {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-lr.png'))}) repeat-y right 0;
}
.bg-wizard-window .z-window-modal-bl {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-l.png'))}) no-repeat 0 bottom;
}
.bg-wizard-window .z-window-modal-br {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-r.png'))}) no-repeat right bottom;
}
.bg-wizard-window .z-window-modal-bm {
background: url(${c:encodeURL(c:cat3('~./',project,'/zul/wnd2/wtp-m.png'))}) repeat-x 0 bottom;
}
.bg-wizard-window .z-window-modal-cnt {
padding:0px; background:red
}
.bg-wizard-window .z-window-modal-cm {
border:0px;
}
</style>
<window id="win2" title="" border="normal" width="800px" sclass="bg-wizard-window"
height="200px" >
<button label="Hello.doModal">
<attribute name="onClick">{
final Window win = (Window) Executions.createComponents(
"/gwtest3.zul", null, null);
win.setMode("modal");
win.setSclass("bg-wizard-window");
}</attribute>
</button>
</window>
</zk>Hi,
I've tried your code and it worked on IE7,
I wonder if that are other issues,
I'm using ZK 3.6.0, IE 7.0.6, and Windows Vista
BTW, I added a line to your sample code for testing external css file
<?link rel="stylesheet" href="test.css"?>
Thanks
I found the solution for my problem. There was a double quote in the CSS source at the end of the line ahead the lines for the styles what I posted. The IE ignores all lines after this double quote. The firefox doesn't has a problem with this.
Thanks again for your help and sorry for the circumstances.
Asked: 2009-04-02 15:41:48 +0800
Seen: 375 times
Last updated: Apr 03 '09