Toolbar buttons, CSS, mouseover weirdness - Ext JS

I have a toolbar with icon-only buttons. This was working with version .4, but breaks in mysterious ways with Ext 1.0alpha2. I have made several changes to my CSS and got it from totally messed up to not bad (see http://www.yui-ext.com/forum/viewtopic.php?t=2832), but there are still two problems:

1) The icons are a couple of pixels too high on the toolbar.

2) On mouseover, the icon gets replaced by what should be a background image.

Here's the bar - normal on top, mouseover below:



For problem 1, I have tried putting margin-top: 2px or padding-top: 2px on the button CSS in several places. The ones that do anything at all cause the toolbar itself to get some strange padding. I can't figure out what to change in the CSS to move the icons down 2 pixels without messing up something else.

For problem 2, the button is defined as (example):

tb.addButton({
   tooltip: 'Next object',
   cls: 'x-btn-icon next-btn',
   handler: this.nextObject,
   scope: this});

and the CSS is:

.next-btn {
	background-image: url('../images/next.gif');
}

.x-item-disabled .next-btn {
	background-image: url('../images/next-cold.gif');
}

I have traced the problem as far as the CSS in ext-all.css for the mouseover:

.x-toolbar .x-btn-over .x-btn-left{
	background:url(../images/default/toolbar/tb-btn-sprite.gif) no-repeat 0 0;
}
.x-toolbar .x-btn-over .x-btn-right{
	background:url(../images/default/toolbar/tb-btn-sprite.gif) no-repeat 0 -21px;
}
.x-toolbar .x-btn-over .x-btn-center{
	background:url(../images/default/toolbar/tb-btn-sprite.gif) repeat-x 0 -42px;
}

Remove those lines, and there is no mouseover action. Which is not what I want - I just want my icon on top of the nice rectangle on mouseover. It appears that the background image in the ext-all CSS is overlaying my background image.

I have been fighting with this for 3 hours and I can't figure it out. Help!

__________________
David Badke
Humanities Computing and Media Centre
University of Victoria, BC, Canada

#2   03-06-2007, 05:45 AM

Old: .next-btn { background-image: url('../images/next.gif'); } New: .next-btn .x-btn-text { background-image: url('../images/next.gif'); }

#3   03-06-2007, 10:34 AM

Thanks! That works perfectly. __________________ David Badke Humanities Computing and Media Centre University of Victoria, BC, Canada