Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
efox ui without scripting by using userchrome.css. for example, if you save the contents of listing 28 as userchrome.css and save that in the chrome directory under the user profile directory, the tab bar will appear at the bottom of the content area. ...
...y using userchrome.css. for example, if you save the contents of listing 28 as userchrome.css and save that in the chrome directory under the user profile directory, the tab bar will appear at the bottom of the content area. ...

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
be overridden for individual flex items. ...
...ems on their associated flex container.) values: flex-start | flex-end | center | baseline | stretch (default) spec: https://drafts.csswg.org/css-flexbox/#align-items-property @mixin align-items($value: stretch) { @if $value == flex-start { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; } @else if $value == flex-end { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; } @else { -webkit-box-align: $value; -moz-box-align: $value; -ms-flex-align: $value; } -webkit-align-items: $value; align-items: $value; } flexbox align self values: auto (default) | flex-start | flex-end | center | baseline | stretch spec: https://drafts.csswg.org/css-flexbox/#align-items-property @mixin align-self($value: auto) { // no ...

The Box Model - Archive of obsolete content
nt is completely invisible and doesn't do more than take space. you should only use it when you need flexible space. if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your xul document. alignment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having center alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add flexibility ...

XUL user interfaces - Archive of obsolete content
" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...

Index - Archive of obsolete content
f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1824 autohide no summary! 1825 bbox xul elements, xul reference a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. 1826 binding needshelp, needstechnicalreview, xul elements, xul reference should be contained within a bindings element. a binding is used to bi...

align - Archive of obsolete content
the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...

Index - Archive of obsolete content
f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1093 autohide no summary! 1094 bbox xul elements, xul reference a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. 1095 binding needshelp, needstechnicalreview, xul elements, xul reference should be contained within a bindings element. a binding is used to bi...

Element Positioning - Archive of obsolete content
you may find the box alignment example useful for trying out the various box properties. cropping text and buttons you could potentially create a button element that contains a label that is larger than the maximum width of the button. of course, a solution would be to increase the size of the button. however, buttons (and other elements with a label) have a s...

XUL element attributes - Archive of obsolete content
the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. allowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. allownegativeassertions type: boolean valid on any element that has a datasources attribute. when multiple datasources are used, one may override an assertion from another. this attribute, if true, which is the default, allows a datasource to ...

attribute.align - Archive of obsolete content
f the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. parameters start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box. end child elements are placed on the right or bottom e...

Mozilla CSS extensions - CSS: Cascading Style Sheets
prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...

box-align - CSS: Cascading Style Sheets
box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ box-align: center; /* as specified */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ box-pack: end; /* as specified */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example > p { /* make children narrower than their parent, so there is room for the box-align */ width: 200...

box-pack - CSS: Cascading Style Sheets
make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are centered horizontally */ width: 300px; /* children should be oriented vertically */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } <div class="example"> <p>i will be second from the bottom o...