Display issues with jquery-ui-map

Question

I have been trying to incorporate the JQuery-ui-map into a webpage, but it seems to be having issues with the image sprites used to display the pop up boxes.

The coding for markers, etc has been quite straight forward and all that seems to work just fine. When you click on a marker, the pop up box appears, but the image elements that make up the shadows and pointer are totally out of alignment.

Also the images used for the zooming control also are out of alignment and basically unviewable.

I don't believe it is conflicting javascripts, as I made a test page with all scripts stripped out except for the ones involved with the map and the issue was still present. The page uses JQuery1.7.1.

My test page is: http://sandbox.pedalerspubandgrille.com/where6.6.1.htm

Answer 1

Check your css.

v6.6.css row 26

media="screen" img, object, embed { max-width: 100%; }