[xul-interop] Why this css z-index is not working in my XUL app?

Tom Brito <[email protected]> Thu, 7 Oct 2010 10:24:30 -0300
Newsgroups gmane.comp.lang.xul.general
Message-ID <[email protected]>
--===============0339415823282920534==
Content-Type: multipart/alternative; boundary=0016363b984e9da66e049206d18e

--0016363b984e9da66e049206d18e
Content-Type: text/plain; charset=ISO-8859-1

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
*

--0016363b984e9da66e049206d18e
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable

<meta http-equiv=3D"content-type" content=3D"text/html; charset=3Dutf-8">I =
have this Xul file:<br><br><blockquote class=3D"webkit-indent-blockquote" s=
tyle=3D"margin: 0 0 0 40px; border: none; padding: 0px;">&lt;?xml version=
=3D&quot;1.0&quot; encoding=3D&quot;UTF-8&quot;?&gt;<br>

&lt;?xml-stylesheet href=3D&quot;chrome://global/skin/&quot; type=3D&quot;t=
ext/css&quot;?&gt;<br>&lt;?xml-stylesheet href=3D&quot;chrome://greenfox/co=
ntent/mycss.css&quot; type=3D&quot;text/css&quot;?&gt;<br>&lt;window xmlns=
=3D&quot;<a href=3D"http://www.mozilla.org/keymaster/gatekeeper/there.is.on=
ly.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>&q=
uot;&gt;<br>

=A0=A0 =A0&lt;image class=3D&quot;Front&quot; src=3D&quot;images/loading.gi=
f&quot;/&gt;<br>=A0=A0 =A0&lt;image class=3D&quot;Back&quot; src=3D&quot;im=
ages/plasma.jpg&quot;/&gt;<br>&lt;/window&gt;</blockquote><br>with this CSS=
:<br><br><blockquote class=3D"webkit-indent-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>

--0016363b984e9da66e049206d18e--


--===============0339415823282920534==
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
--===============0339415823282920534==
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

--===============0339415823282920534==--