CODEWITHSUNDEEP
htmlioscssiphone
Tamerlane
Tamerlane

Reputation: 2103

html Button is not rendered correctly on iOS devices

I have an html button which renders correctly on all browsers, but it is not rendered properly on iOS devices.

Here is css 

.textCont .block button {
    border: none;
    background: white;
    border-radius: 7px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    height: 23px;
    width: 35px;
    line-height: 0;
    margin-left: 5px;
    position: relative;
    top: -4px;
}

In iOS devices it shows button wider then it is supposed to be it is widened towards left. I thought it can be because of the margin-left I have, but after setting it to 0px nothing changed. I feel lost, any idea what can be the issue ?

Upvotes: 1

Views: 1089

Answers (3)

Thilak Rao
Thilak Rao

Reputation: 1932

Perhaps the element inherits padding from somewhere. Please try resetting padding by adding "padding: 0;"

Tip: When in doubt, always check how the browser computes CSS properties by using web inspector and switch to computer tab.

enter image description here

Upvotes: 1

SajithNair
SajithNair

Reputation: 3867

Some suggestions which can lead to answer.

Try margin-left: -5px; padding-left: 0px;

Try background-position: 40% 50%; (more info here https://developer.mozilla.org/samples/cssref/background-position/)

Upvotes: 1

madhushankarox
madhushankarox

Reputation: 1477

Try adding -webkit-appearance: none; to your CSS

Upvotes: 0

Related Questions