Re: [xul-interop] Why this css z-index is not working in my XUL app?
Evgeny <[email protected]> Thu, 7 Oct 2010 23:55:05 +0400
| Newsgroups | gmane.comp.lang.xul.general |
|---|---|
| Message-ID | <[email protected]> |
--===============5497894067025649129==
Content-Type: multipart/alternative; boundary=90e6ba53a91e3cb5f604920c4552
--90e6ba53a91e3cb5f604920c4552
Content-Type: text/plain; charset=ISO-8859-1
Hello
I think that's not a good idea to use CSS 'position' property in XUL,
absolute or fixed.
absolute doesn't work, fixed works with some problems.
1) You can use <stack> or <deck> element, this is the best solution (or set
-moz-stack css property).
<deck selectedIndex="0"> <!-- you change selectedIndex in javascript to
change what is displayed-->
<image .../>
<image .../>
</deck>
It's XUL way.
2)Also if you need floating element above your document, you'd beter use
<panel noautohide="true">
You set it position with showPopup function. See MDC.
3) The *dirty* solution is to use html elements in your xul:
You declare html namespace in your window
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
And use
<html:div style="position:absolute; left:20px; top:20px;">
<html:img src="..."/>
</html:div>
4) Another *dirty* solution (i'm not sure how to make it work in random xul
file) is to use position:fixed
I used it in one firefox extension. There was a problem that element ignored
its z-index when it clipped <browser> element.
I solved it with another browser element in stack
*
*
On Thu, Oct 7, 2010 at 5:24 PM, Tom Brito <[email protected]> wrote:
> I have this Xul file:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
> <?xml-stylesheet href="chrome://greenfox/content/mycss.css"
> type="text/css"?>
> <window xmlns="
> http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> <image class="Front" src="images/loading.gif"/>
> <image class="Back" src="images/plasma.jpg"/>
> </window>
>
>
> with this CSS:
>
> .Back {
> position: absolute;
> left: 0px;
> top:0px;
> z-index:0;
> }
> .Front {
> position: absolute;
> left: 0px;
> top:0px;
> z-index:1;
> }
>
>
> and, for some reason, the images are vertically one above another, not in
> z-index as specified by my CSS. Any idea how to fix it?
> This same CSS in a html file works just fine..
>
>
> *
> Wellington B. de Carvalho
> *
>
>
> ------------------------------------------------------------------------------
> Beautiful is writing same markup. Internet Explorer 9 supports
> standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
> Spend less time writing and rewriting code and more time creating great
> experiences on the web. Be a part of the beta today.
> http://p.sf.net/sfu/beautyoftheweb
> _______________________________________________
> XUL News Wire - http://xulnews.com
> XUL Job Postings - http://xuljobs.com
> Open XUL Alliance - http://xulalliance.org
> _______________________________________________
> xul-talk mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/xul-talk
>
>
--90e6ba53a91e3cb5f604920c4552
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
<div>Hello</div><div><br></div><div>I think that's not a good idea to u=
se CSS 'position' property in XUL, absolute or fixed.</div><div>abs=
olute doesn't work, fixed works with some problems.</div><div>=A0</div>
<div>1) You can use <stack> or <deck> element, this is the best=
solution (or set -moz-stack css property).</div><div><br></div><div><de=
ck selectedIndex=3D"0"> =A0 =A0<!-- you change selectedInde=
x in javascript to change what is displayed--></div>
<div>=A0<image .../></div><div>=A0<image .../></div><div></d=
eck></div><div><br></div><div>It's XUL way.</div><div><br></div><div=
>2)Also if you need floating element above your document, you'd beter u=
se <panel noautohide=3D"true"></div>
<div>You set it position with showPopup function. See MDC.</div><div><br></=
div><div>3) The <strong>dirty</strong> solution is to use html elements in =
your xul:</div><div>You declare html namespace in your window</div><div>
<window xmlns:html=3D"<a href=3D"http://www.w3.org/1999/xhtml">ht=
tp://www.w3.org/1999/xhtml</a>"<br>=A0 xmlns=3D"<a href=3D"h=
ttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mo=
zilla.org/keymaster/gatekeeper/there.is.only.xul</a>"><br>
</div><div>And use </div><div><html:div style=3D"position:absolute;=
left:20px; top:20px;"></div><div>=A0 =A0 <html:img src=3D"=
..."/></div><div></html:div></div><div><br></div><div>4) Anot=
her <strong>dirty</strong> solution (i'm not sure how to make it work i=
n random xul file) is to use position:fixed</div>
<div>I used it in one firefox extension. There was a problem that element i=
gnored its z-index when it clipped <browser> element.</div><div>I sol=
ved it with another browser element in stack</div><div><strong><br></strong=
></div>
<div><br></div><br><div class=3D"gmail_quote">On Thu, Oct 7, 2010 at 5:24 P=
M, Tom Brito <span dir=3D"ltr"><<a href=3D"http://brito.pro">brito.pro</=
a>@<a href=3D"http://gmail.com">gmail.com</a>></span> wrote:<br><blockqu=
ote class=3D"gmail_quote" style=3D"margin:0 0 0 .8ex;border-left:1px #ccc s=
olid;padding-left:1ex;">
I have this Xul file:<br><br><blockquote style=3D"margin:0 0 0 40px;border:=
none;padding:0px"><?xml version=3D"1.0" encoding=3D"UTF-8=
"?><br>
<?xml-stylesheet href=3D"chrome://global/skin/" type=3D"t=
ext/css"?><br><?xml-stylesheet href=3D"chrome://greenfox/co=
ntent/mycss.css" type=3D"text/css"?><br><window xmlns=
=3D"<a href=3D"http://www.mozilla.org/keymaster/gatekeeper/there.is.on=
ly.xul" target=3D"_blank">http://www.mozilla.org/keymaster/gatekeeper/there=
.is.only.xul</a>"><br>
=A0=A0 =A0<image class=3D"Front" src=3D"images/loading.gi=
f"/><br>=A0=A0 =A0<image class=3D"Back" src=3D"im=
ages/plasma.jpg"/><br></window></blockquote><br>with this CSS=
:<br><br><blockquote style=3D"margin:0 0 0 40px;border:none;padding:0px">
.Back {<br>=A0=A0 =A0position: absolute;<br>=A0=A0 =A0left: 0px;<br>=A0=A0 =
=A0top:0px;<br>=A0=A0 =A0z-index:0;<br>}<br>.Front {<br>=A0=A0 =A0position:=
absolute;<br>=A0=A0 =A0left: 0px;<br>=A0=A0 =A0top:0px;<br>=A0=A0 =A0z-ind=
ex:1;<br>}</blockquote><br>and, for some reason, the images are vertically =
one above another, not in z-index as specified by my CSS. Any idea how to f=
ix it?<div>
This same CSS in a html file works just fine..<br><div><br><div><br></div><=
i><div style=3D"text-align:left"><span style=3D"font-style:normal"><i>Welli=
ngton B. de Carvalho</i></span></div></i><br>
</div></div>
<br>-----------------------------------------------------------------------=
-------<br>
Beautiful is writing same markup. Internet Explorer 9 supports<br>
standards for HTML5, CSS3, SVG 1.1, =A0ECMAScript5, and DOM L2 & L3.<br=
>
Spend less time writing and =A0rewriting code and more time creating great<=
br>
experiences on the web. Be a part of the beta today.<br>
<a href=3D"http://p.sf.net/sfu/beautyoftheweb" target=3D"_blank">http://p.s=
f.net/sfu/beautyoftheweb</a><br>___________________________________________=
____<br>
XUL News Wire =A0 =A0 =A0- <a href=3D"http://xulnews.com" target=3D"_blank"=
>http://xulnews.com</a><br>
XUL Job Postings =A0 - <a href=3D"http://xuljobs.com" target=3D"_blank">htt=
p://xuljobs.com</a><br>
Open XUL Alliance - <a href=3D"http://xulalliance.org" target=3D"_blank">ht=
tp://xulalliance.org</a><br>
_______________________________________________<br>
xul-talk mailing list<br>
<a href=3D"mailto:[email protected]">[email protected]=
e.net</a><br>
<a href=3D"https://lists.sourceforge.net/lists/listinfo/xul-talk" target=3D=
"_blank">https://lists.sourceforge.net/lists/listinfo/xul-talk</a><br>
<br></blockquote></div><br>
--90e6ba53a91e3cb5f604920c4552--
--===============5497894067025649129==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
------------------------------------------------------------------------------
Beautiful is writing same markup. Internet Explorer 9 supports
standards for HTML5, CSS3, SVG 1.1, ECMAScript5, and DOM L2 & L3.
Spend less time writing and rewriting code and more time creating great
experiences on the web. Be a part of the beta today.
http://p.sf.net/sfu/beautyoftheweb
--===============5497894067025649129==
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Content-Disposition: inline
_______________________________________________
XUL News Wire - http://xulnews.com
XUL Job Postings - http://xuljobs.com
Open XUL Alliance - http://xulalliance.org
_______________________________________________
xul-talk mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/xul-talk
--===============5497894067025649129==--