Page 1 of 1

CSS Absurdity -- What Gives?

Posted: Mon Aug 27, 2012 5:50 pm
by James Hollomon
I've got a totally bizarre problem that is only showing up in iPad. On www.StorageSurvival.com in iPad, the toll free number at the right of the header does not appear as "Toll Free: 855-767-7780" but just "Toll Free:". The actual phone number doesn't display. It's fine in FF, Chrome and IE on the PC but the store owner's iPad insists there is no phone number there.

I originally had the string absolute positioned and set to right: 10px; top: 45px;

I tried changing in to float: right; and using margins to push it down and it a little give space from the right side of the header. No help

Tried making it white-space: no-wrap; and overflow: visible; and still no number in the iPad.

I tried putting a <p> around the text inside the containing DIV and giving the P element the no-wrap and other css styling specific to the text. No help.

I suppose I could convert the phone number into a graphic, but WHY? What the heck am I missing?

Anyone else out there with an Apple. Can you see the number? Is this some sort of glitch specific to my client's iPad or common to all Apple Safari browsers?

Re: CSS Absurdity -- What Gives?

Posted: Tue Aug 28, 2012 8:16 pm
by Albert Wiersch
Hi James,

That's strange. I pulled it up on my iPad and it worked for a bit and then the number just disappeared. Refreshing the page causes it to briefly display and then disappear again.

The first thing I would do is correct the errors on the page and the CSS problems.

Re: CSS Absurdity -- What Gives?

Posted: Thu Aug 30, 2012 8:13 am
by James Hollomon
Albert and all others who puzzled over this. A fellow developer who happens to be a heavy iPhone/iPad user spotted the culprit. Both devices are programmed to recognize phone numbers and convert them into clickable links that will auto-dial the number. It just so happens that the generic style I had set for the "a" element was assigned the exact same color as the background of the header. Specifically styling that particular link to be white whether unvisited or visited solves it.

Almost all the errors on the page and all on the css-base file are beyond my reach. It's a Yahoo Store and that's content generated by them. I have no control over it. I've ragged on Yahoo! Store management about it, but they vow it does no harm, so they aren't going to fix it. They even got Matt Cutts of Google's word that the failures to validate would not affect Google ratings or ability to parse the pages effectively. So what am I to do. Grin and bear it. It sure complicates my life as a Yahoo! Store Developer though, when I try to validate my own work and have to wade through their sea of error reports.

Re: CSS Absurdity -- What Gives?

Posted: Thu Aug 30, 2012 11:46 am
by Albert Wiersch
Hi James,

Thanks for the update... that was interesting!