opensubscriber
   Find in this group all groups
 
Unknown more information…

x : xul-talk@lists.sourceforge.net 8 October 2010 • 3:55AM -0400

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

REPLY TO AUTHOR
 
REPLY TO GROUP




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 <brito.pro@gmai...> 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
> xul-talk@list...
> https://lists.sourceforge.net/lists/listinfo/xul-talk
>
>

Bookmark with:

Delicious   Digg   reddit   Facebook   StumbleUpon

Related Messages

opensubscriber is not affiliated with the authors of this message nor responsible for its content.