1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Buying Fix A Small CSS Issue On My Website

Discussion in 'Programming' started by mitchellmoxo, Apr 25, 2014.

0
  1. #1
    Hello,

    Looking at my website, the telephone numbers display correctly on a desktop site. However when viewing it on iPhone (safari) the numbers dont display correctly. The colour changes to white and you cant see it against the white background.

    Let me know if you can help

    Thanks
     
    Last edited: Apr 25, 2014
    mitchellmoxo, Apr 25, 2014 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    It doesn't really change to white. You have a fixed width on your header container, and that is the cause of the problem. There's not easy fix really -- if you remove that fixed width, it breaks the layout.
    What I would do is axe that bloat of a presentational outdated markup and rewrite it from scratch. Removing that bandwidth-consuming slider would be a good idea as well.
     
    wiicker95, Apr 25, 2014 IP
  3. mitchellmoxo

    mitchellmoxo Well-Known Member

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    108
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    The cause of the problem is that iPhones change the CSS of numbers so that you can click on them and it will open the phone app to dial the number.

    The problem is i dont know how to fix it.
     
    mitchellmoxo, Apr 25, 2014 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    If that's the only issue (and I doubt it), all it takes is to basically "hide" that number from the device and tell it not to dick with the layout.

    Like this for instance: 0800 6<span></span>34 0790.
    Adding an empty SPAN tag is the quickest fix IMHO. Just make sure that you don't apply any style to that SPAN. It is a non-semantic inline-level element and doesn't change the structure of your markup as such. Your markup is purely presentational anyway (and that is BAD). Adding a comment there works as well, but I prefer this method.
     
    wiicker95, Apr 25, 2014 IP
  5. jcwebhole

    jcwebhole Active Member

    Messages:
    93
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    put this in your header
    <meta name="format-detection"content="telephone=no">
     
    jcwebhole, Apr 25, 2014 IP