Encountering a minor issue with some <a> tags that have images as background, and the text inside the tags is indented using CSS. However, on the Android browser, part of the string used in HTML appears to cover the background image within the area of the tag. When viewed on mobile, the code and screenshot look like this:
image:
<li class="item185">
<a class="soc-link" href="#">rss/sapa</a>
</li>
<li class="item186">
<a class="soc-link" href="https://www.facebook.com/pages/..">facebook/sapa</a>
</li>
<li class="item187">
<a class="soc-link" href="#">youtube/sapa</a>
</li>
CSS:
li {
display: inline-block;
}
a.soc-link {
background-position: -4px 0;
background: url("../images/sapa-bg.png") no-repeat;
display: block;
height: 50px;
margin: 0 0 0 1em;
overflow: hidden;
text-indent: 10000px;
width: 50px;
}