define the height of an image in xul extension

Question

My extension is an overlay that has some images inside a toolbar. I need to display these images small (about 15px), but they render always at the same height of toolbar. I've already tried to define height and maxHeight of image and of hbox where them are palced but it doesn't work.

here is the piece of code:

...

<toolbox id="navigator-toolbox">
    <toolbar id="my-toolbar">
        <label>images:</label>
        <hbox id="rsour_inputRating">
            <image id="rsour_1" />
            <image id="rsour_2" />
            <image id="rsour_3" />
            <image id="rsour_4" />
            <image id="rsour_5" />
        </hbox>
    <toolbarseparator />

...

Answer 1

At the top of the file, add:

<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>

Then in the css file:

#rsour_inputRating img  {height:15px;}

Answer 2

The correct way is to use -moz-box-align in CSS, or align attribute in xul, so the image doesn't stretch vertically:

#rsour_inputRating{
  -moz-box-align:center;
}

#rsour_inputRating img{
  list-style-image : url("chrome://...");
  width:20px;
  height:15px;
}