Question

I have a problem that is and has been perplexing me for hours. I have the following html:

<div id='numbers'><span>[phone]<br />[phone]</span></div>

I have applied the following CSS:

#numbers span {
    color:#CCC;
}

I’ve checked the inheritance and can’t see any problems. This code displays fine on every browser I’ve tested it in other than Safari on the iPad and iPhone where the numbers are there (I can click on them and it asks me if I want to call), however the text is white! I’ve played, changed the DIV Id’s to make sure I wasn’t crossing styles, changed the span color to all sorts, nothing at all changes this.

Has anyone else had this problem?

(I am using a touchstart event with Jquery that shows and hides this DIV when an <a> is clicked on. I mention this as it may be causing the problem though I can’t see how.)

Answer 1

You can add the following meta tag to the head of the HTML, but you will loose the ability to click the phone numbers:

<meta name="format-detection" content="telephone=no">

alternatively try:

#numbers a {
    color:#CCC;
}