safari ios 6 (ipad iphone) problems with add to cart button

Hi all,
I have had a long search on that issue, but found nothing.
The buttons "add to cart" and other buttons (change currency, log in) are not what they should be. They are ok in safari 6.0.2 on my mac, ok in firefox 18.0.2, ok in chrome 24.0.1312.57, ok in ie 8 (windows of course).
But on my iphone 4S (desktop version), ipad 4 using safari or google chrome (same engine I guess) the button is rounded and not nice looking.
see picture from my ipad :
[img]

photo%201.jpg

[/img]
The problem can be seen on ipad and iphone on this link (demo gavick) :
http://demo.gavick.com/joomla25/eSport/index.php/virtuemart/category/shaka-boots-h-detail
It gives the same problem on a fresh site installed and updated to the latest versions of virtuemart (2.0.18a) and joomla (2.5.9) and the latest version of eSport template (2.14.1).
Any help possible ?
Thanks guys

Hi

Please try add this code to override.css file do not forget to enable this file in template settings.

Code: Select all

button, .button, input[type="submit"], input[type="button"], div.mobileSwitch > a {
    height: auto;
    padding: 8px 12px;
}


Thanks for your interest in my question.
It did not change anything. I am sorry !
I added all the lines in the right file as asked and turned ON css override in advance setting of the template.
Do you have another solution ?

Code: Select all

/*
#------------------------------------------------------------------------
# e-Sport - January 2011 template (for Joomla 1.7/2.5)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */
/* CODE POUR SAFARI IPAD ET IPHONE (BOUTONS) */
    button, .button, input[type="submit"], input[type="button"], div.mobileSwitch > a {
        height: auto;
        padding: 8px 12px;
    }

I had a look in safari (desktop) and it DID changed the look (buttons are higher). But that is not where it should do something. It should only modify buttons for safari ipad and iphone, nothing else.
The safari version for pc does not have any problems. It look just fine like in firefox, chrome or ie.
Hope this will help.
There must be a code for safari ios 6 ?

Hi

I cannot tell You a code for this browser only, becuase it would require some additional browser recognition script. So all I can do is to give a code which will work on everyt browser. You can try to remove padding values from it and add some min-height. Something like this:

Code: Select all

button, .button, input[type="submit"], input[type="button"], div.mobileSwitch > a {
    height: auto;
    min-height: 18px;
}


Hi,
Sorry I come back late since your post.
I tried your last code but this is not good either. Sorry, but worse. As you can see in firefox :

Capture d’écran 2013-02-14 à 18.38.50.jpg

Nothing changed in safari ios on my iphone :

photo 2.PNG

Clic on this image as it is truncated in this post

Why not an additional browser recognition script ? That is really what I expected as first answer.
I really do not know why safari ios behave differently from safari mac .

Any Help ?

Hi

Each browser will display it differently so it's important to make it good for all and not by fixes for specific browser.

Please remove last code adviced and use this one instead:

Code: Select all

button, .button, input[type="submit"], input[type="button"], div.mobileSwitch > a {
    height: auto;
    min-height: auto;
}


Unfortunately all I can do is guessing, since it's displaying fine in my safari

This did the same thing as the previous code in safari ios (see picture of my previous post). But it does not change anything on safari or Chrome mac (the button is the same size as in the gavick demo (I cleaned the cache)). But it did change the height in firefox that is smaller (previous post).
Really strange.

One thing I do not understand is when you write :

Unfortunately all I can do is guessing, since it's displaying fine in my safari

Do you mean safari on ipad or iphone ?

I think safari ios is really different. The buttons are rounded, they should not be so rounded.
I must say I did not change anything in the gavick quickstart template. The result on gavick demo is really the same as on my site.

Do you think you could help more ?

Hi

I can resolve it if I have an ftp access and be able check how button looks like after every modification. Anyway as You've noticed some browsers are adding it's own style to some elements, and as You can see at least safari for mobile is hard to change.

I do not understand why you can not simply install the e-Sport template and just check it out (because it is just exactly the same as the quickstart template I installed. Mine is local with mamp.
I have to copy it on a server to give you access.
Don't you think it is easier if you do it you side ?

Hi

Because I do not have an access to serve myself and cannot make it localy becuase will not have an access. My internet provider is blocking that (I've tried already )

Ok. Let than ignore it for now and when You finish everything else and be ready to move site online let me know and I'll take care of it than.

Ok thanks teitbite, let's see that later

Hi

Ok. Please just let me know when You will be ready in this thread.

For people looking for the solution, here is the link :
https://www.gavick.com/forums/140/different-buttons-on-ipad-15125.html?p=69983&hilit=ipad#p69983

And the most important thing : the code I used for eSport :

Code: Select all

.addtocart-button, .default, .details-button {
-webkit-appearance:none;
    }