CSS Absurdity -- What Gives?

Discussion about CSS related issues.
Post Reply
James Hollomon
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 3
Joined: Mon Aug 27, 2012 2:24 pm

CSS Absurdity -- What Gives?

Post by James Hollomon » Mon Aug 27, 2012 5:50 pm

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?

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3446
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Absurdity -- What Gives?

Post by Albert Wiersch » Tue Aug 28, 2012 8:16 pm

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:
http://www.onlinewebcheck.com/?url=http ... vival.com/

And the CSS problems:
http://www.onlinewebcheck.com/?url=http ... s-base.css

In the above CSS style sheet and in the other style sheets.
Image
Albert Wiersch

James Hollomon
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 3
Joined: Mon Aug 27, 2012 2:24 pm

Re: CSS Absurdity -- What Gives?

Post by James Hollomon » Thu Aug 30, 2012 8:13 am

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.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3446
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: CSS Absurdity -- What Gives?

Post by Albert Wiersch » Thu Aug 30, 2012 11:46 am

Hi James,

Thanks for the update... that was interesting!
Image
Albert Wiersch

Post Reply