CSS Image sprites not displaying properly on iPhone / iPad

Question

I've literally spent hours on this problem. I took over this site, and the CSS was already set up, with the exception of some layout issues. The only sprites used on this site are for homepage and email links. The phone number is supposed to display above the homepage and email icons, not IN an icon. Here is the HTML:

<div class="box agencies">
  {{ for letter,list in agencies }}
<div class="item">
    <h2><a href="#" class="btn">{$letter}</a></h2>
</div>

<div class="index">
    {{for agency in list }}
          <div class="innerbox">
    <div class="info">
    {{if agency.phone }}
              <strong>{$agency.phone}</strong>
            {{ endif }}
            <ul>
    {{if agency.website }}
              <li class="item2"><a href="{$agency.website}" target="_blank"></a></li>
            {{ endif }}

            {{if agency.email }}
              <li class="item1"><a href="mailto:{$agency.email}"></a></li>
            {{ endif }}
            </ul>
          </div><!-- INFO -->

          <h3>{$agency.name}</h3>
          <p>{$agency.tagline}</p>
          <a href="#" class="view" data-collapse="{$agency.id}" data-state="0">
            VIEW GIRLS &darr;
          </a>

         <div class="gallery" data-collapsible="{$agency.id}">
           <ul>
           {{ for girl in agency.girls }}
             <li>
               <a href="girls/profile?id={$girl.id}">
               <img src="{$girl.thumb}" style="width:74px;" alt="" /></a>
             </li>
           {{ endfor }}
           </ul>
         </div><!-- GALLERY -->
        </div><!-- INNERBOX -->
        {{ endfor }}
        <div class="clear"></div><!-- CLEAR -->
    </div><!-- INDEX -->
    {{ endfor }}
  </div><!-- BOX -->

And here is the CSS:

div#content div.innerbox h3 {
    margin-bottom:0;
    color:#1d1c1c;
    font-size:14px;
    font-weight:normal;
}
div#content div.innerbox div.info {
    width:120px;
    float:right;
}
div#content div.innerbox div.info strong {
    margin-bottom:5px;
    text-align:right;
    display:block;
    color:#373737;
    font-size:12px;
}
div#content div.innerbox div.info ul {
    overflow:hidden;
    zoom:1;
}
div#content div.innerbox div.info li {
    margin-left:5px;
    float:right;
}
div#content div.innerbox div.info a {
    width:31px;
    height:32px;
    display:block;
    overflow:hidden;
    background:url(../images/sprites-contact.gif) no-repeat left top;
}
div#content div.innerbox div.info li.item1 a {
    background-position:-37px 0;
}
div#content div.innerbox div.info li.item1 a:hover {
    background-position:-37px -34px;
}
div#content div.innerbox div.info li.item2 a:hover {
    background-position:0 -34px;
}

I haven't worked a lot with CSS, and this one has me stumped. Any help would be greatly appreciated!

That's not HTML. Looks like server-side code? (Or template code?) — DA., Mar 08 '14 at 00:11
As for your CSS, it looks fine (thought I'd wrap your image url in quotes). Can you show us a link to a JSFiddle or your site? Also, what do you mean 'not displaying properly'? Can you provide more details? — DA., Mar 08 '14 at 00:13
The site uses Twig for a template engine. That's what the curly braces are for. Here's a link to the site: http://londonenglishescortdirectory.com/ I wanted to upload an image of the issues, but I'm new to this site. On the girl's profile page, the phone number is to the left, and Home and Email sprites to the right. It looks fine on a computer, but on iPhone / iPad, the device puts the phone number inside of a sprite that shouldn't even be displaying. The same issue on the Agencies page. I've spent hours looking all over the internet and haven't found anything yet — Tony Langworthy, Mar 08 '14 at 05:53
I don't see your sprite image referenced anywhere in your JSFiddle. Which line is it on? Also, for future reference, please warn people before linking to an adult web site. Lots of us have day jobs at corporations that tend to frown on daytime viewing of said sites. — DA., Mar 08 '14 at 19:36
Ok, apologies for the content of the site. I copied the complete CSS file rather than picking through an obnoxious amount of css... The url to the sprite is located on line 863, and of course, when I view the fiddle on my laptop, it looks fine. iPad, it's not correct. — Tony Langworthy, Mar 08 '14 at 22:58
What do you mean 'not correct'? I see the sprite images on both iPhone and iPad. — DA., Mar 08 '14 at 23:45
The phone number is wrapped in an icon that shouldn't even be there. There should only be two links, the sprites, and the phone number should display above the icons. — Tony Langworthy, Mar 09 '14 at 00:08

score 1 · Accepted Answer · edited May 23 '17 at 11:57

If I understand the problem (it took me a while to figure it out) is the issue that your phone number is being styled as an anchor tag and, therefore taking on the sprite?

If so, this is a 'feature' in mobile safari. If it sees something that looks like a phone number, it will automatically make it a link for the user to select.

In doing so, it's picking up the styles you are using for the other anchors and, as such, using the sprite.

More info: How to disable phone number linking in Mobile Safari?

What I'd suggest is be more specific with your classes and selectors so it's not including the phone number.

So in your CSS where you have:

div#content div.innerbox div.info a {sprint styles...}

Change it to:

div#content div.innerbox div.info ul a {sprint styles...}

Since the phone number is outside that particular UL, it won't pick up that style.

Couple of quick tips:

the above is a bit verbose. There's no need to write out the tags in most cases. Consider shortening it to: #content .innerbox .info ul a {sprint styles...} You can probably also remove several of those selectors, but it really depends on your CSS and HTML and what works for you.
when posting a JSfiddle, whenever possible, try and post only the problem markup. Asking users to deal with a 2000+ line CSS file is asking a lot in some cases. :)

Ok, thank you so much! That makes complete sense! As far as the rest of the CSS, I realize it's a mess. I took over the site with all of the CSS in place, and I could never figure out why the previous developer was so ambiguous in naming the classes. It's been frustrating, to say the least, and especially since I'm not the greatest with CSS. Also, thank you for the tips. This is my first question on this site, and I just signed up for a JSFiddle account last night. Thank you for being so helpful. — Tony Langworthy, Mar 09 '14 at 00:18
And just an update: I just changed the CSS to include the ul tag, as you suggested, and also changed the meta tag. Telephone was set to yes. Problem solved!! Thank you again!! :) — Tony Langworthy, Mar 09 '14 at 00:30
@Tony glad I could help! Taking over other's CSS can be a nightmare. Good luck with it all (also, please be sure to mark the the answer as accepted!) — DA., Mar 09 '14 at 00:43

CSS Image sprites not displaying properly on iPhone / iPad

1 Answers1