Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Not sure why this happens on Safari for iPad

Posted on 2011-04-22
39
Medium Priority
?
307 Views
Last Modified: 2012-06-21
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
Comment
Question by:Eddie Shipman
  • 21
  • 18
39 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35447664
It has something to do with that image in the upper left.

That thing doesn't even appear in FF.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447725
which one you talking about?
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35447761
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447787
I don't care about Chrome. I was asking for iPad views.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447791
In Safari 4 Windows it looks just fine but in iPad, not.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35447808
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447829
Those images are coming from a jQuery plugin called jQZoom.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447832
Even when I disable the plugin, it still happens
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447839
My boss just left with his iPad, I can't check it on my own now, sigh!
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35447860
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35447993
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35448019
Wonder what has a width set to that much? I don't see it.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35448028
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35448030
#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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35448040
jqZoom disabled now.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35448052
Thanks. I was wrong. Not the issue. Still has the crazy horizontal scrolling. I will keep researching it.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35449272
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35449287
I will check when I get back to my desk. Sorry I got caught up and haven't been near my ipad.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35460038
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35460049
Sorry I had a crazy busy weekend with family. I will look at it some more this morning.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35467598
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35467926
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468208
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
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35468516
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35468640
know what line in what CSS file? Don't find one if those in my CSS.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468656
if you can't find it, just put this in your css:

img.center {
  margin: 0 !important;
}

Open in new window

0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468667
BOOM!

Looks great!
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35468671
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35468681
Know of any other way to do it?
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468801
Well, it looks centered to me and the margin fix made it work on the ipad.

Here is a screen shot. Site SS
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468828
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35468832
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
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468867
The featured product clicking is great.

What do you mean Grimes Reading Light?
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35468911
The photo of the little light  in the QuickDeal Of The Day area next to the countdown timer
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35468942
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
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35469010
I want it to be 60px tall.
I will remove the width attribute, that takes care of it I think.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35469024
Yeah, that is what I meant..........

Anything else?
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 35469027
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
 
LVL 26

Author Closing Comment

by:Eddie Shipman
ID: 35469036
Excellent work, thanks a lot.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month13 days, 9 hours left to enroll

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question