0

I have the following Xul:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://bartest/skin/bartest.css" type="text/css"?>

<window width="400" height="300"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <vbox id="backBox">
        <hbox id="frontBox">

            <!-- this label is needed, else this box doesn't show up -->
            <label value="" />

        </hbox>
    </vbox>

</window>

with the following CSS:

#backBox {
    background-color: red;
    width: 200px;
    position: fixed;
    left: 0;
}

#frontBox {
    background-color: blue;
    width: 100px;
    position: fixed;
    left: 0;
}

I expected to see a 200px red box, and a 100px blue box inside. But what I'm seeing is just the 100px blue box.

Why the red box (id="backBox") is not showing up?

0

1 Answer 1

1

What should happen here is that both the boxes should be stretched to the width of the window, because you haven't told them not to, and containers stretch their children by default. If you want their boxes to respect their CSS width then you need to change their alignment which is achieved either by the align="start" attribute or CSS -moz-box-align: start; but note that these belong on the parents i.e. the window and the vbox.

1
  • Thanks! Also, I needed to position and left attributes from the frontBox (and only from the frontBox) for it to work. Jan 26, 2011 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.