CSS for Javascript popups - odd behaviour

BenScott1

I am attempting to format a popup in a javscript map using the popup's css.  I have copied the popup.png sprite locally and have modified the pointers.

Strangely, I have been able to successfully reference the bottom, bottom left, bottom right, left and right pointers, but the top, top left and top right pointers display a black box instead of the pointer (see below).

As an example of the ones that work - here is the bottom one:

The problem is not to do with the sprite or with the background position setting, because I can change the bottom pointer to reference the top pointer in the sprite.. and it displays fine i.e.:

If I set the background of the top pointer to transparent the black box goes away but still no arrow.  I have played with the position settings and anything else I can think of but with no success.  I am beginning to think this is a bug. 

My css file and the sprite is attached.

Cheers,

Ben

popup.png

hydromappopup.css

khutchins

Popups can work with either a PopupTemplate or an InfoTemplate so they'll work just fine with setInfoTemplate.  Here's a sample that shows this:

ArcGIS API for JavaScript Sandbox

But looking at your code it looks like you are already using a popup so I'm confused about where the sprite and popup arrows are causing an issue. 

Here's a jsbin showing a version of the above sample with the pointer modified:

JS Bin - Collaborative JavaScript Debugging