How can it happen that text changes its colour between form and real representation on a mobile device?

  • Profile Image
    Gerhard
    Asked on January 15, 2012 at 01:46 PM

    I have created a mobile site where the telephone number and the mobile telephone number of the website owner was set up to appear in white on a blue page background.

    When I am looking at the website in different emulators and simulators everything looks o.k so far, white coloured telephone numbers on a blue background.

    I have performed a real live test on an iphone and all of a sudden the telephone numbers appear in the colour blue.

    Blue telephone numbers on a blue background which is hardly to  be seen.

    By the way, the telephone numbers where not associated with a link, which could have caused the change in colours.

    Any help appreciated

    Kind regards

    Gerhard

    PS:
    The colour change happens on all pages in the upper area, within the logo area, as well as on the impressum page in the logo area as well as in the middle of the page.




  • Profile Image
    abajan
    Answered on January 15, 2012 at 02:12 PM

    It's a bit of a longshot but try adding the following rule in to the CSS you have already injected:

    .form-label-top {
    color: #FFF !important;
    }

    The !important keyword should override whatever is influencing the color of those labels.

    Do let us know if it worked.

  • Profile Image
    abajan
    Answered on January 15, 2012 at 02:13 PM

    Oops! Sorry, that's the wrong selector. Let me get back to you shortly with the right one.

  • Profile Image
    abajan
    Answered on January 15, 2012 at 02:33 PM

    Okay, try this instead:

    input {
    background: #2D4B7D !important;
    color: #FFF !important;
    }

    I wasn't sure of which shade of blue to use for the background but you can change it to your liking. Also, I thought it wise to include the !important keyword for both declarations just in case some browsers decided to render the background in white: White text on a white background would be invisible and we certainly don't want that!