• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 311
  • Last Modified:

Not sure why this happens on Safari for iPad

http://www.listinventory.com

It looks all "squished" on the iPad.
Been tasked with finding out why.
Worked fine until adding the featured product block on the right yesterday.

What did I screw up? It doesn't do this in Safari for Windows.
0
Eddie Shipman
Asked:
Eddie Shipman
  • 21
  • 18
1 Solution
 
jonahzonaCommented:
It has something to do with that image in the upper left.

That thing doesn't even appear in FF.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
which one you talking about?
0
 
jonahzonaCommented:
I can't tell what it is. In chrome it is in the upper left and has a weird box when you scroll over it. To the left of the header/title image.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Eddie ShipmanAll-around developerAuthor Commented:
I don't care about Chrome. I was asking for iPad views.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
In Safari 4 Windows it looks just fine but in iPad, not.
0
 
jonahzonaCommented:
I know. But I think that is causing the issue. I looked at it on my iPad. There is some funky code there causing the issue.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Those images are coming from a jQuery plugin called jQZoom.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Even when I disable the plugin, it still happens
0
 
Eddie ShipmanAll-around developerAuthor Commented:
My boss just left with his iPad, I can't check it on my own now, sigh!
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Also looks fine on my Android, except for the Flash. I don't get the jQZoom effect on the images, though because there is no pointer on the phone.
0
 
jonahzonaCommented:
Well, I am looking at it again right now, and the reason it looks "Squished" is because there is horizontal scrolling for a significant distance. probably about 5000-6000 pixels.

Also, your main div isn't centered.

I don't know of any debugging consoles for iPad. I will look around some more.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Wonder what has a width set to that much? I don't see it.
0
 
jonahzonaCommented:
I am sure that it is just some weird code somewhere that is causing the issue.

Could you try removing the JQZoom object temporarily so I can recheck to see if that is possibly causing the issue?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
#container has
width: 1100px;

and
#inner_content has
width: 1080px;

and
#navigation has
text-indent:-9999px;

Could those be the culprits? This just started happening yesterday, though.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
jqZoom disabled now.
0
 
jonahzonaCommented:
Thanks. I was wrong. Not the issue. Still has the crazy horizontal scrolling. I will keep researching it.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I wrote code to essentially disable jQZoom. I check for the userAgent and if it's iPhone or iPad, I don't even include the jQZoom code.
Now, you don't think it could be the AddThis "plugin" do you? I see this code in the rendered HTML:
<div style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;" id="_atssh">...</div>

Open in new window

It includes an iframe in the div.
0
 
jonahzonaCommented:
I will check when I get back to my desk. Sorry I got caught up and haven't been near my ipad.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Have you come up with anything? I thought it was the width of the Featured Products block on the upper right that made the viewport too wide. I modified it
to be the same as the adsense block and still, it squishes it. I have even moved the block back to the left side and still it is squished.
How am I going to figure this one out?
0
 
jonahzonaCommented:
Sorry I had a crazy busy weekend with family. I will look at it some more this morning.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Can you test it now to see if it still comes up squished? I have made some changes.

Also, could you see if the images for the board posts at the bottom have a zoomer.
I'm not sure how you would do that on an iPad since it usually takes a cursor.
0
 
jonahzonaCommented:
Still doing it.

It is definitely a mobile browser issue. It is doing the same thing on my iPhone.

Still digging through the code.
0
 
jonahzonaCommented:
I did make some progress.

I got firebug lite for safari installed and enabled the ipad render mode for safari. working through it now.
0
 
jonahzonaCommented:
FOUND IT!!!!!!!!!!

Look at the img.class selector

It has a margin of 0px -999em

Get rid of that -999em and you should be good.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
know what line in what CSS file? Don't find one if those in my CSS.
0
 
jonahzonaCommented:
if you can't find it, just put this in your css:

img.center {
  margin: 0 !important;
}

Open in new window

0
 
jonahzonaCommented:
BOOM!

Looks great!
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Is it this one?
img.center {
  margin: 0 -999em;
}

Open in new window


what that CSS does is center the small image in the QuickDeals section of the header.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Know of any other way to do it?
0
 
jonahzonaCommented:
Well, it looks centered to me and the margin fix made it work on the ipad.

Here is a screen shot. Site SS
0
 
jonahzonaCommented:
I just checked every browser, and it is centered in all and the iPad and iPhone look great too.

Looks like the margin of that img.center class fixed the issue.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
the image of the Grimes Reading Light is not centered. Can you also check the click functionality of the div around the Featured Product on the right?
The entire div has a click bound to it, not just the anchor.
0
 
jonahzonaCommented:
The featured product clicking is great.

What do you mean Grimes Reading Light?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
The photo of the little light  in the QuickDeal Of The Day area next to the countdown timer
0
 
jonahzonaCommented:
From what I can tell that image has a width of 60px defined in the css but it is not 60px wide.

If you remove the 60px width, it stretches to its normal size.

It is the #link_img selector.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I want it to be 60px tall.
I will remove the width attribute, that takes care of it I think.
0
 
jonahzonaCommented:
Yeah, that is what I meant..........

Anything else?
0
 
Eddie ShipmanAll-around developerAuthor Commented:
He's gonna have to live with that one because he's the one clamoring to make this work for all of our 30 iPad visitors last month, .vs 100,000 visitors on all the other browsers combined.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Excellent work, thanks a lot.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 21
  • 18
Tackle projects and never again get stuck behind a technical roadblock.
Join Now