Jump to content


Photo
- - - - -

font color css not working on ipad


  • Please log in to reply
5 replies to this topic

#1 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 11 May 2012 - 11:13 AM

I'm testing a site I'm working on in different browsers and devices and have noticed that the phone number text in the header is displaying as black on the ipad rather than the grey it should be. I'm using the great little plugin Browser Specific CSS and I've successfully added code to increase the width of the 'Talk to us:' text in the header but the phone number is still displaying in black for some reason. Here is my code: /* Header Text */ #headertext-talk {width: 148px; font-size: 1.4em; color:#DDC723; float: left; padding-left: 16px; margin-bottom: 24px;} #headertext-number {width: 400px; font-size: 1.4em; color:#8b9b92; float: left; margin-bottom: 24px;} /* = Browser Specific Code = */ /* ============================== */ .ipad #headertext-talk {width: 184px;} .ipad #headertext-number {color:#8b9b92 !important;} /* ============================== */ Am I doing something wrong?? Has anyone else had any similar issues? Any help greatly appreciated as always! Tracy

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 May 2012 - 01:21 PM

I'm not very familiar with iPad-related issues but I did some searching around and there is someone who had an issue with getting the h1, h2, h3 headings on Safari to display the right color using CSS (but not on the iPad). I looked at your code and noticed that you put your phone number
layers inside of an

tag. Usually it should be the other way around (headings inside
), so maybe that may have something to do with it. Instead of putting the
layers inside of an

tag, try reformatting the HTML like this so that they're inside of another
container.


#3 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 11 May 2012 - 03:59 PM

Thank you Catrina, I see what you mean about the
I'll have a look at that, it might be something to so with it. Today is only the second time I've used an ipad so I don't have much experience either. I've just noticed that the other 2 phone numbers in the footer are the wrong color too. Not black but grey this time. The 'T:' and the 'M:' are white as they should be but the 2 numbers grey when they should be white also. And on closer inspection when you touch them a window pops up giving you the options to 'Add to contacts' or 'Copy' so maybe its treating them like links perhaps? This is the code from the footer widget...

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 May 2012 - 04:05 PM

There is a semi-colon at the end of your code (after the last
tag) that doesn't have to be there... or was that accidentally pasted here? Maybe they are being treated as links, but I'm not sure. Is your link color set to be black?

#5 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 11 May 2012 - 04:15 PM

The ; was accidently pasted and not in the code. I found this which backed up my thinking about them being treated like links: http://stackoverflow...nk-css-override And I've just added the following CSS which has worked- yippee! .ipad #headertext-number a {color:#8b9b92 !important;} .ipad .footer-text6 a {color:#ffffff !important;} Thanks for your help, I have one more issue with the footer on the ipad to fix and then hopefully it's sorted :)

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 May 2012 - 04:26 PM

Cool beans. You're welcome.