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;
}
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;
}