** Solved **
Chrome can apparently have one heck of a death grip on a file in the cache. Killing the process, clearing the cache manually, and refreshing a dozen times did nothing.
Changing the file names to force it to download something new did.
Go figure.
** Update **
Ok, so this is a Chrome only issue it appears. In response to the suggestion to clear the browser cache I actually fired up IE 9 since it has never loaded the page. That does show the icon in hover state.
Now I am really stumped since cross platform issues are a little beyond my paygrade. That’s why I got JQuery to do all the heavy lifting for me in the first place! 😛
Working with the latest 1.8.20 JQuery.
Needed an icon so edited all 7 of the master icon png files and added an icon in an unused space.
Created a new icon in the css file with the relevant offsets. Everything seems to be working just fine, except the hover state, which is blank.
Can’t seem to determine through inspection just what file is being used on the hover state, but the CSS file indicates a png file that shows my custom icon in it. All have been edited anyways.
Closed the browser and refreshed it several times (although caching would have prevented me from seeing it at all).
Why is the icon blank during the hover state?
** In response to the feedback **
There was no code because, as I stated already, it is working in all other button states. Most of this is done in Photoshop anyways. It seemed rather unnecessary, so I apologize for the omission.
.ui-icon-dollar { background-position: -160px -144px; }
That is the only extra line of code in the CSS file. Everything else is unmodified.
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/images/ui-icons_0078ae_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(/images/ui-icons_0078ae_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(/images/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(/images/ui-icons_e0fdff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/images/ui-icons_056b93_256x240.png); }
.ui-state-active .ui-icon {background-image: url(/images/ui-icons_f5e175_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(/images/ui-icons_f7a50d_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/images/ui-icons_fcd113_256x240.png); }
Those are the original CSS lines from JQuery Themeroller. All the master icon files are the same (except for color), and multiple offsets are not defined for an icon. That one line of code I added is all that defines an icon normally.
Since it shows correctly in other states, I can only assume the offset is correct.
Now as for the inspection tools in Chrome, it just does not show any difference on the span element in the hover state. That background image remains the same.
I was not aware you could edit that in realtime using Chrome! 🙂 Thanks for that.
Changing the background image in realtime has no effect on the button itself while in hover state. It still remains blank….
Of course I am going through all of this because making your own icon is all fine and dandy, but you can’t use .button to define any buttons and callbacks without being limited to what is in those master icon files. It’s pretty useful to have a single call to activate all the different states of a button, define the labels, and callbacks all in one go. Write less code and all that 🙂
There has to be a way to add button icons to a JQuery theme and still have them work within the framework..
This may sound obvious but the first thing I think of when a similar thing happens to me is browser cache. To remedy it I try ctrl-refresh, or a different browser. I am surprised how often it helps. I hope your problem is as simple. =]