Board Game Arena

Hi:
This is my tpl

my images work perfectly on chrome, but firefox loads the wrong sprite image. When I check element inspect in firefox, everything seems to be fine.

Thanks a bunch for any help!!!!

This is my .tpl
<div id="map_container">
<div id="map_scrollable"><div id="chamber" ></div></div>
<div id="map_surface"></div>
<div id="map_scrollable_oversurface"></div>
<a id="movetop" href="#"></a>
<a id="moveleft" href="#"></a>
<a id="moveright" href="#"></a>
<a id="movedown" href="#"></a>
</div>

var jstpl_chamber = '<div id="${id}" class="chamber chamber_${type} rotation_${rotation}" ></div>'


my .css


.chamber {
background-image: url(img/chambers.png);
background-repeat: no-repeat;
display: block;
}

.chamber_basic1 {
width: 120px;
height: 120px;
background-position: 0 0;
}

.chamber_basic2 {
width: 120px;
height: 120px;
background-position: -120px 0;
}

.chamber_basic3 {
width: 120px;
height: 120px;
background-position: -240px 0;
}

.chamber_basic4 {
width: 120px;
height: 120px;
background-position: 0 -120px;
}

.chamber_basic5 {
width: 120px;
height: 120px;
background-position: -120px -120px;
}

.chamber_basic6 {
width: 120px;
height: 120px;
background-position: -240px -120px;
}

.chamber_basic7 {
width: 120px;
height: 120px;
background-position: 0 -240px;
}

.chamber_exit_chamber {
width: 120px;
height: 120px;
background-position: -120px -240px;
}

.chamber_gem1 {
width: 120px;
height: 120px;
background-position: -240px -240px;
}

.chamber_gem2 {
width: 120px;
height: 120px;
background-position: -360px 0;
}

.chamber_main_chamber {
width: 120px;
height: 120px;
background-position: -360px -120px;
}

Define "wrong sprite image"?

Thanks for your reply, Victoria La,


On my /img directory, i am using chambers.png, so It is not because Firefox is expecting png .


Thanks again!!!

It now all works properly. not sure why. I will keep an eye on it

Thanks again!!!!

Did you change the image at some point? What you described earlier sounds like your browser had cached a previous version of the file.
Whenever you make changes to images or CSS, you should do a hard refresh (CTRL+F5).