Question

I have created a nice joomla website with a sprite navigation that works fine on pc but has some problem on mobile devices and tablets: after I “touch” the link the background image disappear…how can I fix this?

Please see http://www.kartika.eu/index.php?option=com_content&view=category&layout=blog&id=15&Itemid=239&lang=en

This is an example of my CSS:

#brands_menu   {
  margin: auto;
}
.tab td {
  display: inline-block;
  height: 153px;
  width: 153px;
  border: none;
}
a.license1:link {
  display:block;
  width:153px;
  height:153px;
  text-indent:-9999px;
  background:url(../images/sprite.png) 0px 0px no-repeat;
  float: left;
  border: none;
}
a.license1:hover {
  display:block;
  width:153px;
  height:153px;
  text-indent:-9999px;
  background:url(../images/sprite.png) 0px -153px no-repeat;
  float: left;
  border: none;

}

Answer 1

I fix it by myself! I only have to add this code to my css and the problem is resolved

a.license1 {
  display:block;
  width:153px;
  height:153px;
  text-indent:-9999px;
  background:url(../images/sprite.png) 0px 0px no-repeat;
  float: left;
  border: none;
}

It Is not perfect but it works