Grid pager toolbar buttons not shown

[Baggins]

I try to use paged grid and everything works OK except for the pager buttons. The pager toolbar shows ok, and the part of "Page XX of XX" is shown too, but no forward/next/etc. buttons. I checked with firebug and the HTML is there, the CSS is there and the image URLs are OK, however the images are not shown. Here's how it looks like:

http://pics.livejournal.com/stas/pic/0001dw7w

The html for toolbar is:



<div class="ytoolbar">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<span id="elgen-4" class="ytb-button" title="First Page" style="-moz-user-select: none;">
<span class="ytb-button-inner ygrid-page-first" style=""/>
</span>
</td>


etc. for other buttons. The css firebug shows is:



.ygrid-page-first {grid.css (line 229)
background-image:url(/yui/yui-ext/resources/images/grid/page-first.gif);
}


(and I checked this image URL is OK) however still no images shown. The javascript code that creates the grid is:



var sm = new YAHOO.ext.grid.SingleSelectionModel();
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel(this.inColumns);
colModel.defaultSortable = true;
var dataModel = new YAHOO.ext.grid.JSONDataModel({
root: 'data',
totalProperty: 'total',
fields: this.fields,
});
dataModel.baseParams = this.zcBaseParams('getData');
dataModel.remoteSort = this.serverSort;
this.zcParamMap(dataModel.paramMap);
// create the Grid
dataModel.setDefaultSort(colModel, 0, 'ASC');
dataModel.initPaging(location.pathname, this.rows);
dataModel.addListener("load", this.onDataReload, this, true);

sm.addListener("selectionchange", this.onSelect, this, true);

var grid = new YAHOO.ext.grid.Grid(this.id, {
dataModel: dataModel,
colModel: colModel,
selModel: sm,
trackMouseOver: true,
autoWidth: true,
autoHeight: true,
});
grid.autoSizeHeaders = true;
grid.autoSizeColumns = true;
grid.render();
dataModel.loadPage(1);
grid.getSelectionModel().selectFirstRow();
this.grid = grid;


The actual data is delivered by AJAX request, and it's OK (see the screenshot - all data is shown). Also, if I change pages by means of external buttons, everything works. Only toolbar buttons are not shown.

I'm using YUI-ext version 0.33.

[tryanDLS]

Did you change the paths to the background image in the css file? Maybe you have a path resolution problem?

[Baggins]

Did you change the paths to the background image in the css file? Maybe you have a path resolution problem?

I verified the pathes and they are OK. I see HTTP request delivering correct image in Firefox. Also, if I go to firebug and manually change image URL to known correct one (in case I still am missing something somehow) it still does not show the image. Note on the scrrenshow there are tiny blue lines where images should be - so probably it's some size issue (since the image is background, its probably clipped if the cell is too short). However, I'm unable to figure out what causes the issue.

[Baggins]

I tried some more things with firebug and I saw this
1. The layout shows the buttons are 4x16 size. I guess they should be 16x16 but explicitly setting width does not help - something is "compressing" them...
2. If I add some inside the button span, so that it becomes wider, I can see the button image

[jack.slocum]

Include toolbar.css or yui-ext.css

[Baggins]

That helped, thanks a lot.