Jump to content
Sign in to follow this  
MissT

font color css not working on ipad

Recommended Posts

MissT

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

Share this post


Link to post
Share on other sites
catrina
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.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

MissT
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...

Share this post


Link to post
Share on other sites
catrina
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?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
MissT
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.com/questions/6615822/ipad-contact-link-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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×