Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
The following zul file renders different UI on IE 8 and Firefox 3.0.10
The zul file should display a button on the screen. The button appears
correct on Firefox; on IE 8, the button is too much smaller. Besides,
on IE 8, when mouse moving over the button, the button may become even
more smaller sometimes.
Appreciate any suggestion, thanks!!
<window droppable='true' mold='default' minimized='false' moldSclass='z-window-embedded' width='100%' sizable='false' mode='embedded' minwidth='500' ZIndex='-1' maximized='false' height='100%' style='background-color:rgb(255, 255, 255); z-index:1000' closable='false' zclass='z-window-embedded' shadow='true' minimizable='false' border='none' draggable='false' zindex='-1' maximizable='false' minheight='100' > <div id='1246283909781' ZIndex='-1' mold='default' height='20px' style='position:absolute;z-index:1000; padding:0px' width='80px' left='294px' draggable='false' top='111px' zindex='-1' > <label droppable='false' mold='default' moldSclass='z-label' width='100%' ZIndex='-1' height='100%' style='position:absolute' zclass='z-label' multiline='false' pre='false' value='label' draggable='false' zindex='-1' hyphen='false' > </label> </div> <div id='1246283546406' ZIndex='-1' mold='default' height='23px' style='position:absolute;z-index:1000; padding:0px' width='71px' left='401px' draggable='false' top='108px' zindex='-1' > <button droppable='false' mold='default' moldSclass='z-button' width='100%' tabindex='-1' label='button' ZIndex='-1' height='100%' orient='horizontal' style='position:absolute' zclass='z-button' dir='normal' disabled='false' draggable='false' zindex='-1' > </button> </div> </window>
There are too many arguments... by codegen?...
what is moldSclass? why do you specify zindex by css(once) & ZIndex(twice)?
Use your only style... do you consider the difference css behavior between firefox & ie8.
It is really hard to know which part is wrong. Can you provide a simple example?
Hello, kindalu:
You're right
the previous sample is generated by codegen, thus there may be some redundant properties
The following is a much simpler sample
However, the result is identical with the previous sample.
The problem is, the button has very different size on Firefox and on IE 8
I understand there may be different css behavior between firefox and IE
But, since the sample (the following) only depend on the "style" attribute for positioning,
the difference in height is really beyond my expectation
Is there solution for controlling sizing in cross-platform manner?
Look forward to more suggestion, thanks!
<window width='100%' sizable='false' height='100%' border='none' zIndex='1000' > <div id='1246283909781' height='20px' style='position:absolute;' width='80px' left='294px' top='111px' zIndex='1000' > <label width='100%' height='100%' style='position:absolute' multiline='false' value='label1' > </label> </div> <div id='1246283546406' height='50px' style='position:absolute;' width='71px' left='401px' top='108px' zIndex='1000' > <button width='100%' tabindex='-1' label='button' height='100%' style='position:absolute' > </button> </div> </window>
That is an issue of the zk default beautiful button.(which formed by 3x3 table with round corner images)
(Here Just a work around)If you use the browser build-in button by setting the mold="os". The size will be the same.
Btw, the performance will boost when using browser build-in button.
You may want to look at this http://docs.zkoss.org/wiki/New_Features_of_ZK_3.6.2
Asked: 2009-06-29 14:06:15 +0800
Seen: 222 times
Last updated: Jul 01 '09
